ReactJS/ASP.Net Core 2.1 版本 CORS 错误

Posted 2023-03-03

【中文标题】ReactJS/ASP.Net Core 2.1 版本 CORS 错误

【英文标题】：ReactJS/ASP.Net Core 2.1 Version CORS Error

【发布时间】：2021-11-14 22:53:58

【问题描述】：

当我通过 React JS 进行 axios 发布时，我在 ASP.Net Core 端收到以下 CORS 错误。

加载资源失败：Origin http://localhost:3000 is not allowed 通过访问控制允许来源。 https://localhost:5001/api/vendorregistration

我安装了以下作为我的 Nuget 包，并没有在下面应用任何其他表单，但它不起作用。

Microsoft.AspNet.Cors。 5.2.7版本 Microsoft.AspNetCore.Cors 2.1.1 版本

How to enable Cors for every type of request in asp.net core 3.1

Startup.cs

public class Startup

    public Startup(IConfiguration configuration)
    
        Configuration = configuration;
    

    public IConfiguration Configuration  get; 

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    
        services.Configure<CookiePolicyOptions>(options =>
        
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        );

        services.AddCors(o => o.AddPolicy("ReactPolicy", builder =>
        
            builder.AllowAnyHeader()
                   .AllowAnyMethod()
                   .AllowAnyOrigin();
               //    .AllowCredentials();
        ));

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    
        if (env.IsDevelopment())
        
            app.UseDeveloperExceptionPage();
        
        else
        
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        

        app.UseStaticFiles();
        app.UseCookiePolicy();

        app.UseHttpsRedirection();

        app.UseCors("ReactPolicy");
        app.UseMvc();

    

VendorRegistrationController.cs

namespace Bait.Controllers


[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
[EnableCors("ReactPolicy")]

ReactJS 端 RegistrationForm.tsx

 const handleFormSubmit = async (values: any): Promise<any> => 
   const response = await axios.post<User>('https://localhost:5001/api/vendorregistration',  data: values )
   console.log(response);
 ;

【问题讨论】：

您的 cors 策略配置是正确的，我还将您的代码复制到我新创建的 asp.net core2.1 项目中，它确实有效，所以恐怕您需要重建或重新打开您的Visual Studio，然后重新启动您的应用程序并重试，我认为它更有可能不会生效。

@TinyWang 我卸载了项目并重新安装并添加了相同的文件。但是，当我在 ReactJS 端触发项目时，我仍然得到同样的错误。我想知道它是 HomeController.cs 还是我忘记的其他东西？

非常感谢先生，祝您编码愉快：)

【参考方案1】：

请检查我的代码 sn-p，因为它对我有用。我复制了你的启动文件，所以我只是把使用包放在这里。

我的测试控制器：

using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;

namespace WebAppMVCcore2.Controllers

    [Produces("application/json")]
    [Route("api/[controller]")]
    [ApiController]
    [EnableCors("ReactPolicy")]
    public class HelloController : Controller
    
    
        [HttpPost]
        public string Index()
        
            return "hello";
        
    

还有我的启动文件：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace WebAppMVC_core2

我的测试反应代码：

import logo from './logo.svg';
import './App.css';
import React,  Component  from 'react';
import axios from 'axios';

class App extends Component 

  constructor(props)
    super(props);
  

  componentDidMount()
      const response = axios.post('https://localhost:44326/api/hello').then(res=>
        console.log('res=>',res);            
      )
      console.log(response);
  
  
  render() 
    return (
      <div className="App">
        <header className="App-header">
          <img src=logo className="App-logo"  />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  


export default App;

【讨论】：

我更新了我的控制器文件。这对我有用。谢谢

@Yavuz 很高兴听到您解决了您的问题，先生，您更新了控制器方法吗？听起来很神奇。无论如何它都很棒。感谢您的回复先生，您能接受我的帖子作为答案吗？我真的很感激你。

【参考方案2】：

您不必在控制器中的每个操作中都使用。只需放 app.UseCors("ReactPolicy"); app.UseStaticFiles(); line之前的行

app.UseCors("ReactPolicy");

希望它会起作用！

【讨论】：

app.UseStaticFiles();第一个 app.UseCors("ReactPolicy");我补充说。但是，它没有用。