Flutter Web调用API出现XMLHttpRequest错误，移动端正常求解决方案

• 移除请求头中的无效CORS配置
  你在Flutter请求里添加的Access-Control-Allow-Origin、Access-Control-Allow-Credentials等头是服务器响应时才需要返回的字段，前端请求携带这些完全无效，还可能干扰浏览器校验。请把这些从请求头中删除，只保留必要的Content-Type：

  headers: {
    'Content-Type': 'application/json',
  },
  

• 正确配置ASP.NET Core的CORS策略
  服务器端的CORS配置是核心，确保在Program.cs中正确注册并启用CORS中间件：

  // 注册CORS服务
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowFlutterWeb", policy =>
      {
          // 如果不需要带凭证（如Cookie、JWT），可以用允许所有源
          policy.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
  
          // 如果需要带凭证，必须指定具体源，不能用通配符*
          // policy.WithOrigins("http://localhost:5000", "https://your-flutter-web-domain.com")
          //       .AllowAnyHeader()
          //       .AllowAnyMethod()
          //       .AllowCredentials();
      });
  });
  
  // 启用CORS，注意中间件顺序：放在UseRouting之后，UseAuthorization之前
  app.UseCors("AllowFlutterWeb");
  

  注意：若启用AllowCredentials，AllowAnyOrigin会失效，必须明确列出允许的前端域名，这是浏览器的安全机制。

• 确保OPTIONS预检请求被正确处理
  浏览器发送POST等非简单请求前会先发送OPTIONS预检请求，ASP.NET Core的CORS中间件会自动处理，但如果你的API有自定义中间件或路由拦截逻辑，要确保OPTIONS请求不会被拦截，能正常返回CORS响应头。

• 正确禁用Chrome Web安全（仅开发环境用）
  开发时禁用Web安全的命令必须携带--user-data-dir参数，否则Chrome不会生效：

  flutter run -d chrome --disable-web-security --user-data-dir=/tmp/chrome_dev_session
  

• 排查具体错误信息
  打开Chrome开发者工具（F12）→ Network标签，查看失败的请求：

  • 检查Response Headers是否包含正确的Access-Control-Allow-Origin等CORS字段
  • 查看Console标签的具体错误提示，比如凭证模式不匹配、源未被允许等，根据提示精准调整配置

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