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

Question

当我通过 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);
 };

Answer 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" alt="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;

Answer 2

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

app.UseCors("ReactPolicy");

希望它会起作用！