React代理部署后返回HTML而非JSON问题求助

你遇到的问题：React + .NET后端项目，本地靠React代理解决CORS问题，测试正常；部署到服务器后，API请求返回200状态码，但内容是React的入口HTML，调用resp.Json()时抛出错误：Unexpected token '<', "<!doctype "... is not valid JSON；添加Accept: application/json请求头后，又出现406错误（服务器无法生成符合内容协商头的响应）。

核心原因分析 #

1. API请求未被转发到.NET后端，被React静态服务器处理
   本地开发时，create-react-app的开发代理会自动把API请求转发到后端，但部署后React是以静态文件形式放在Web服务器（如Nginx、IIS）上的。静态服务器无法识别哪些是API请求，当请求API路径时，找不到对应静态资源，就会触发单页应用的路由 fallback 机制，返回React的index.html文件，这就是你拿到HTML的原因。

2. 添加Accept头后触发406的逻辑
   当你指定Accept: application/json，静态服务器明确收到了“需要JSON格式响应”的要求，但它只能返回HTML文件，无法生成符合要求的JSON响应，因此按照HTTP规范返回406（Not Acceptable）状态码。

解决方法 #

• 配置Web服务器的反向代理
  针对你的API路径（比如/api开头的请求），配置Web服务器将这类请求转发到.NET后端地址：

  • Nginx配置示例：

    server {
      listen 80;
      server_name your-domain.com;
    
      # 处理React静态资源
      location / {
        root /path/to/react/build;
        try_files $uri $uri/ /index.html; # SPA路由fallback
      }
    
      # 转发API请求到.NET后端
      location /api {
        proxy_pass http://localhost:5000; # 替换为你的.NET后端地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
      }
    }
    

  • IIS环境需安装URL重写模块，添加规则将/api/*的请求转发到后端。

• 修正React生产环境的API base地址
  不要依赖本地代理的相对路径，生产环境中API请求的baseURL应指向服务器转发后的路径（如/api），或直接指向后端域名（需后端允许跨域）。

• 配置.NET后端的CORS策略
  本地代理绕过了CORS校验，部署后需后端明确允许前端域名的跨域请求：

  // 在Program.cs中配置
  builder.Services.AddCors(options =>
  {
    options.AddPolicy("AllowFrontend", policy =>
    {
      policy.WithOrigins("https://your-frontend-domain.com") // 替换为你的前端域名
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
  });
  
  app.UseCors("AllowFrontend");
  

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