Flutter Web调用登录接口出现XMLHttpRequest错误如何解决？

你遇到的XMLHttpRequest error是Flutter Web场景下典型的CORS（跨域资源共享）策略限制问题，和你本地的代码逻辑无关。Postman属于桌面客户端，不受浏览器同源策略约束，所以请求可以正常返回，你的代码本身没有语法或调用错误，不需要调整业务代码。

解决方案 #

1. 后端配置CORS（生产环境首选） #

这是最合规的长期方案，需要后端接口服务在响应头添加以下配置：

• Access-Control-Allow-Origin：配置允许跨域的域名，本地调试可填写http://localhost:<你的调试端口>，生产环境填写你的Flutter Web线上域名，临时测试可填写*（不建议生产环境使用，有安全风险）
• Access-Control-Allow-Methods：放开POST请求权限
• Access-Control-Allow-Headers：允许你用到的自定义头x-api-key、Content-Type

2. 本地调试临时绕过（仅开发阶段用） #

如果暂时不方便改后端配置，本地调试时可以启动禁用安全策略的Chrome来绕过CORS校验：

• Windows系统运行命令：
  flutter run -d chrome --web-browser-flag "--disable-web-security"
• Mac系统先运行以下命令打开禁用安全策略的Chrome，再正常启动Flutter Web即可：
  open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

3. 反向代理方案 #

如果无法修改后端配置，也可以在Flutter Web的部署服务（比如Nginx、Node服务）上配置反向代理，把API请求路径代理到目标接口地址，让请求变成同源请求，自然不会触发CORS校验。

内容的提问来源于stack exchange，提问作者Jishnu K Sanjeevan