ASP.NET Core API对接React Native遇CORS跨域错误求解决方案

遇到如下错误：

Access to fetch at 'https://myurl.azurewebsites.net/Player/1' from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

使用ASP.NET Core开发Web API，与React Native前端通信时，网页直接访问、本地Web、Expo Web均正常，但手机或安卓模拟器无论访问本地还是Azure部署的API均失败，已尝试以下方案但无效：

• 在program.cs中配置允许任意源、方法、请求头的CORS策略并启用：

  var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: MyAllowSpecificOrigins,
                        policy =>
                        {
                            policy.AllowAnyMethod();
                            policy.AllowAnyHeader();
                            policy.AllowAnyOrigin();
                        });
  });
  

  并添加：

  app.UseCors(MyAllowSpecificOrigins);
  

• 给接口方法添加[DisableCors]特性：

  [DisableCors]
  [HttpGet("{id}")]
  public List<Player> GetPlayers(int id)
  {
      return (from c in _context.Player.Take(1)
              where c.PlayerId == id
              select c).ToList();
  }
  

• 在Azure部署后，配置允许所有源的CORS（后台设置中已添加*）

针对性解决方案 #

1. 修正program.cs中CORS中间件顺序
   CORS中间件必须放在路由、授权中间件之前执行，确保app.UseCors在app.UseRouting()和app.UseAuthorization()之前，正确示例：

   var builder = WebApplication.CreateBuilder(args);
   
   // 配置CORS服务
   var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
   builder.Services.AddCors(options =>
   {
       options.AddPolicy(name: MyAllowSpecificOrigins,
                         policy =>
                         {
                             policy.AllowAnyOrigin()
                                   .AllowAnyMethod()
                                   .AllowAnyHeader();
                         });
   });
   
   // 添加控制器服务
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   // 先启用CORS
   app.UseCors(MyAllowSpecificOrigins);
   
   // 再启用路由、授权、端点
   app.UseRouting();
   app.UseAuthorization();
   app.MapControllers();
   
   app.Run();
   

2. 移除[DisableCors]特性
   该特性会禁用当前接口的CORS策略，与全局允许所有源的配置冲突，直接删除即可。

3. 本地API的模拟器/真机访问适配

   • 安卓模拟器访问本地API时，将localhost替换为10.0.2.2（模拟器专属回环地址），比如请求地址改为http://10.0.2.2:5000/Player/1
   • 真机测试时，确保手机与电脑在同一局域网，用电脑的局域网IP替换localhost，比如http://192.168.1.100:5000/Player/1

4. Azure部署后的CORS验证

   • 确认Azure App Service的CORS设置中，Allowed origins确实添加了*，无多余空格或特殊字符
   • 若开启了HTTPS Only，前端请求必须使用https协议，不能用http
   • 用Postman请求Azure API，检查响应头是否包含Access-Control-Allow-Origin: *，若没有则重启App Service生效配置

5. React Native请求优化

   • 非必要不要添加自定义请求头，若必须添加，需在CORS策略中明确允许对应头
   • 不要设置mode: 'no-cors'，这会导致响应无法读取，保持默认cors模式即可

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