React客户端调用.NET Core API遇CORS错误的解决方法咨询

首先纠正你前端代码里的无效操作：你设置的axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"完全没用——Access-Control-Allow-Origin是后端服务器需要返回给浏览器的响应头，前端自己添加这个请求头不会被浏览器认可，反而可能干扰正常请求，直接删掉这行代码。

下面提供两种可行的解决方案：

方案1：在.NET Core API中配置CORS（推荐生产+开发环境使用） #

CORS是后端层面的权限控制，正规解决方案是在API中启用并配置允许的跨域来源：

1. 安装CORS依赖（如果未安装） #

在Visual Studio的NuGet包管理器中安装Microsoft.AspNetCore.Cors，或者使用CLI命令：

dotnet add package Microsoft.AspNetCore.Cors

2. 在Program.cs中配置CORS策略 #

打开API项目的Program.cs，添加CORS服务并启用中间件（注意中间件顺序）：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略，允许React开发服务器的来源
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactLocal", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 指定React的运行地址
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 添加控制器服务
builder.Services.AddControllers();

var app = builder.Build();

// CORS中间件必须放在UseRouting之后、UseAuthorization之前
app.UseRouting();
app.UseCors("AllowReactLocal"); // 启用刚才定义的CORS策略
app.UseAuthorization();

app.MapControllers();

app.Run();

如果需要临时允许所有本地来源（比如开发时端口经常变动），可以把WithOrigins("http://localhost:3000")替换为AllowAnyOrigin()，但生产环境必须指定具体的域名，禁止使用AllowAnyOrigin()。

3. 验证效果 #

重启.NET Core API服务，再运行React项目调用接口，CORS错误即可消除。

方案2：React开发环境配置代理（仅适合开发调试） #

如果不想修改后端配置，仅在开发阶段快速调试，可以通过React代理转发请求，绕过浏览器的CORS检查：

1. 创建代理配置文件 #

在React项目根目录（和package.json同级）创建setupProxy.js文件，写入以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:7071', // 你的API地址
      changeOrigin: true,
    })
  );
};

2. 修改React中的请求地址 #

把原来的完整API地址改为相对路径：

function GetApiResults(){
    const axios = require('axios').default;

    axios({
        method: 'get',
        headers: { 'Content-Type': 'application/json' },
        url: '/api/Users', // 去掉域名，只保留接口路径
      }).then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
    });
}

export default GetApiResults;

3. 重启React开发服务器 #

Create React App会自动加载代理配置，重启后请求会被转发到http://localhost:7071，浏览器不会触发CORS检查。

内容的提问来源于stack exchange，提问作者Psymon25