Flutter Web应用遇CORS策略拦截错误，如何解决？

问题场景 #

用Flutter开发Web应用，调用对接SAP的.NET后端API时触发CORS拦截，错误提示：

从源地址'http://localhost:64848'访问'API_URL'处的XMLHttpRequest被CORS策略拦截：
预检请求的响应未通过访问控制检查：
请求的资源上不存在'Access-Control-Allow-Origin'标头。

前端请求代码（基于Dio，带基本认证拦截器）：

await DioUtil.getInstance()
      .post(
    apiUrl,
    options: Options(
      headers: {'content-type': 'application/json', 'Access-Control-Allow-Origin': true, "Accept": "*/*"},
    ),
    data: body,
  )
      .then((value) {
    
      debugPrint("Status Code == " + value.statusCode.toString());
      
      } else {
        tryAgainDialog(getContractFullReport);
        setState(() {
          _isLoading = false;
        });
      }
    });
  });

核心原因 #

你在前端请求里添加的Access-Control-Allow-Origin完全无效——这个标头是后端返回给浏览器的，用来告知浏览器允许哪个源的请求，不是前端发给后端的。问题根源是.NET后端未配置允许你的Flutter Web本地地址发起跨域请求。

解决步骤 #

1. 在.NET后端配置CORS策略 #

全局配置（ASP.NET Core）

在Program.cs中注册并启用CORS服务，这是最通用的方式：

var builder = WebApplication.CreateBuilder(args);

// 定义CORS策略，允许指定源的跨域请求
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFlutterLocal", policy =>
    {
        // 替换为你的Flutter Web实际地址，生产环境需改为正式域名
        policy.WithOrigins("http://localhost:64848")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 因使用基本认证，必须开启此项
    });
});

// 其他服务注册（如AddControllers等）...

var app = builder.Build();

// 注意：需在UseRouting和UseAuthorization之前启用CORS
app.UseCors("AllowFlutterLocal");

// 其他中间件配置...

app.Run();

控制器/方法级配置（按需启用）

若无需全局开启CORS，可在特定控制器或API方法上添加特性：

[EnableCors("AllowFlutterLocal")]
[ApiController]
[Route("api/[controller]")]
public class SapDataController : ControllerBase
{
    // API方法逻辑...
}

2. 前端代码调整 #

去掉请求头中的Access-Control-Allow-Origin，同时确保Dio请求携带凭证（适配基本认证）：

await DioUtil.getInstance()
      .post(
    apiUrl,
    options: Options(
      headers: {'content-type': 'application/json', "Accept": "*/*"},
      withCredentials: true, // 开启凭证携带
    ),
    data: body,
  )
  // 后续逻辑...

3. 额外检查点 #

• 验证后端响应头：用浏览器开发者工具查看响应头，确认是否包含Access-Control-Allow-Origin: http://localhost:64848。
• 生产环境规范：不要使用AllowAnyOrigin()，必须指定具体前端域名，避免安全漏洞。
• 预检请求处理：若后端有自定义中间件，需确保OPTIONS类型的预检请求能正常通过，ASP.NET Core的CORS中间件会自动处理此项，但自定义中间件不要拦截OPTIONS请求。

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