React对接.NET Core Web API注册接口报Failed to fetch错误怎么解决

你遇到的Failed to fetch错误是**跨域资源共享(CORS)**限制导致的：Postman没有跨域校验机制所以可以正常请求接口，但浏览器会对不同源（协议、域名、端口任意一个不同就算跨域）的请求做跨域校验，你的React前端运行端口和.NET后端的44385端口不一致，就触发了这个限制。

解决方案 #

1. 后端配置CORS（推荐，适配本地开发和生产环境） #

在你的.NET Core Web API项目中添加CORS配置即可：
如果是.NET 6+版本，在Program.cs中添加如下代码：

// 在AddControllers()之后添加CORS服务注册
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactDev", policy =>
    {
        // 此处替换为你React本地运行的实际地址，比如默认的http://localhost:3000
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 在UseRouting()之后、UseAuthorization()之前添加CORS中间件
app.UseCors("AllowReactDev");

如果是.NET 5及更早版本，在Startup.cs的ConfigureServices和Configure方法对应位置添加上述配置即可。

2. 前端配置代理（本地开发临时方案） #

如果仅本地开发不想修改后端配置，可以在React项目中配置代理中转请求：
如果是create-react-app创建的项目，在package.json中新增一行配置：

"proxy": "http://localhost:44385"

然后修改你的请求代码，把绝对路径改为相对路径：
将

const response = await fetch ('http://localhost:44385/api/auth/register' , {

修改为

const response = await fetch ('/api/auth/register' , {

本地开发服务器会自动把请求转发到后端地址，避开跨域限制。

额外注意项 #

• 生产环境部署时不要开启AllowAnyOrigin配置，仅允许你的前端正式域名访问接口，避免安全风险。
• 你代码中第一行的import { METHODS } from "http";没有被使用，可以直接删除，避免打包引入不必要的依赖。

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