为何Flutter客户端调用Web API时出现CORS跨域拦截问题？

我使用Flutter客户端通过Dio发起POST请求至http://mohammad.co.nz/MSTRATAPI/api/Device/Add，请求来源为http://localhost:56750，却收到错误提示：

Access to XMLHttpRequest at 'http://mohammad.co.nz/MSTRATAPI/api/Device/Add' from origin 'http://localhost:56750' has been blocked by CORS

Flutter客户端代码 #

postData(String deviceId, String name, String age, String mobile,String  lat, String lot, int isOnline)async{  
 Response response;
 var dio = Dio();  
 response = await dio.post('http://mohammad.co.nz/MSTRATAPI/api/Device/Add', 
 data: {
   'device_id': deviceId, 
   'name': name,
   'age':age,
   'phoneNumber':mobile,
   'isOnline':isOnline,
   'lat':lat,
   'long':lot
  },
   options: Options(
      headers: {"Access-Control-Allow-Origin": "*"},
    )
 );
}

Web API端代码 #

using Repositories;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAutoMapper(typeof(Program));
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddTransient<IUserRepository, UserRepository>();
builder.Services.AddTransient<IAccountRepository, AccountRepository>();
builder.Services.AddTransient<ITransactionRepository, TransactionRepository>();
builder.Services.AddTransient<IDeviceRepository, DeviceRepository>();
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder =>
        {
            builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
        });
});
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseDeveloperExceptionPage();
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseDeveloperExceptionPage();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.UseCors("AllowOrigin");
app.Run();

错误原因 #

1. CORS策略名称不匹配：Web API中定义的跨域策略名称是AllowAll，但启用时调用的是不存在的AllowOrigin策略，导致正确的跨域规则未生效。
2. 中间件顺序错误：UseCors中间件必须放在UseAuthorization和MapControllers之前，否则服务端无法在响应中正确添加跨域相关的HTTP头。
3. 客户端请求头设置错误：Access-Control-Allow-Origin是服务端返回的响应头，客户端在请求中添加这个头没有任何作用，反而可能干扰请求的正常处理。

修复方案 #

• 修正Web API的CORS策略名称：将app.UseCors("AllowOrigin");改为app.UseCors("AllowAll");
• 调整中间件顺序，将UseCors移到UseAuthorization之前：

  app.UseHttpsRedirection();
  app.UseCors("AllowAll");
  app.UseAuthorization();
  app.MapControllers();
  

• 移除客户端请求中的无效头：删除Options里的"Access-Control-Allow-Origin": "*"配置

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