Flutter Web调用HTTPS WCF服务时出现XMLHttpRequest错误如何解决

第一步：对比请求头差异 #

• 打开Chrome开发者工具的「Network」面板，找到Flutter Web发出的失败请求，复制完整请求头，和Postman调用成功的请求头逐一比对
• 重点检查Content-Type、Accept、自定义头字段：WCF对请求头格式要求严格，Flutter的http/dio库默认发送的Content-Type如果和服务端预期不一致（比如服务端要求application/json但实际发了text/plain）会直接触发跨域拦截
• 注意如果请求带自定义头，必须确保WCF的CORS配置里已经在Access-Control-Allow-Headers中放行对应字段

第二步：检查预检请求（OPTIONS）处理逻辑 #

大部分Flutter Web跨域错误都是OPTIONS预检请求未被服务端正确处理导致，即使普通CORS测试通过，也可能因为Flutter请求触发了预检逻辑失败

• 查看Network面板有没有OPTIONS请求，状态码是否为200/204：如果OPTIONS请求返回405/500等错误，需要修改WCF配置，允许OPTIONS请求方法
• 检查WCF的global.asax或者服务配置里的OPTIONS处理逻辑，必须返回以下响应头：

  Access-Control-Allow-Origin: * （或对应你的Flutter Web部署域名）
  Access-Control-Allow-Methods: POST, GET, OPTIONS
  Access-Control-Allow-Headers: Content-Type, 你用到的自定义头
  Access-Control-Max-Age: 86400
  

• 注意如果你的WCF服务用了绑定配置，必须确保webHttpBinding开启了跨域支持，不要仅在IIS层面配CORS，WCF自身的拦截器会优先处理请求

第三步：排查Flutter侧请求配置问题 #

• 如果你用dio库，不要开启withCredentials参数：如果服务端CORS配置里没有允许Access-Control-Allow-Credentials: true，开启这个参数会直接触发跨域错误
• 本地调试阶段可以用跨域规避方案验证是否为服务端问题：运行调试时添加参数--web-browser-flag "--disable-web-security"，如果此时请求正常，100%是服务端CORS配置和Flutter请求不匹配导致
• 检查请求的URL是否拼写正确，有没有多余的斜杠、大小写错误：WCF的路由是大小写敏感的，和部分测试平台自动补全/忽略大小写的逻辑不同

第四步：WCF服务端特殊配置检查 #

• 确认你的WCF REST服务的[OperationContract]标签上有没有正确标注[WebInvoke]属性，Method属性是否包含POST，ResponseFormat是否和你预期的返回格式一致
• 如果你用了IIS托管WCF，检查IIS的请求过滤规则有没有拦截OPTIONS请求，或者有没有限制POST请求的大小

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