Flutter Web生产环境XMLHttpRequest跨域报错修复方法

你本地调试阶段请求正常，本质是flutter run调试模式默认内置了代理转发，会自动绕过浏览器的CORS（跨域资源共享）校验，并不是你之前改的配置生效了。应用部署到生产环境后，没有了本地调试的代理层，浏览器会直接拦截不符合CORS规则的跨域请求，就会抛出XMLHttpRequest错误。
另外你代码里存在一个认知错误：Access-Control-Allow-Origin是服务端返回的响应头，加在客户端请求头里完全没有作用，反而可能触发不必要的OPTIONS预检请求。

方案1：协调接口服务端配置正确的CORS规则（优先推荐） #

CORS是浏览器自带的安全策略，只有接口服务端配置了允许你的生产站点域名跨域访问，浏览器才会放行请求：

• 服务端需要在接口响应头中添加Access-Control-Allow-Origin字段，值为你的生产站点完整域名，如果是公开无鉴权的接口可以直接设为*
• 如果请求携带自定义头、身份凭证，服务端还需要同步配置Access-Control-Allow-Headers、Access-Control-Allow-Credentials对应字段，同时正确响应OPTIONS类型的预检请求。

方案2：自建代理层转发请求（无法修改第三方接口配置时使用） #

如果你调用的是第三方公开API、无权修改服务端CORS配置，可以在自己的生产服务端搭建代理转发规则：

• 用Nginx、Node服务、Serverless函数等工具，在你自己的站点域名下新增一个代理路由，比如/api/proxy/time
• 所有发往该路由的请求，由你的服务端转发到目标时间API地址，服务端之间的通信不受浏览器CORS规则限制
• 把Flutter代码里的请求地址替换为你自己的代理路由地址即可，Nginx代理配置参考：

location /api/proxy/time {
    proxy_pass https://www.timeapi.io/api/Time/current/zone?timeZone=Europe/Italy;
    proxy_set_header Accept application/json;
}

方案3：清理无效的本地调试配置 #

你之前参考的本地绕过CORS的方案在生产环境完全无效，需要全部移除避免额外异常：

• 删除请求头中配置的"Access-Control-Allow-Origin": "*"字段
• 不要依赖禁用浏览器安全策略（比如给Chrome加--disable-web-security启动参数）的方案，不可能要求所有生产环境用户修改浏览器配置
• 不要尝试通过dart:html的原生HttpRequest接口绕过限制，这类请求依然受浏览器CORS规则约束，无法解决问题。

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