Flutter Web应用Browser Client的send方法抛出XMLHttpRequest错误如何解决

问题根因定位 #

两个独立问题叠加导致报错：

1. 浏览器同源策略限制：Flutter Web调试时前端页面运行在随机端口（如你日志中的localhost:53992），和接口地址localhost:9090跨域，浏览器直接拦截请求，不会把服务端响应返回给前端，所以触发XMLHttpRequest错误。Postman不受同源策略限制，因此可以正常拿到服务端的业务错误提示。
2. 业务参数缺失：Postman返回的Field Date Registered is required!明确说明请求体缺少服务端要求的必填字段。

排查解决步骤 #

1. 修复CORS跨域问题 #

根据使用场景选择对应方案：

• 开发阶段临时方案：启动Flutter Web调试时禁用浏览器安全策略
  若使用VSCode调试，在launch.json配置中添加参数：

  "args": ["--web-browser-flag", "--disable-web-security"]
  

  若直接用命令行运行：

  flutter run -d chrome --web-browser-flag "--disable-web-security"
  

• 生产环境适配方案：在服务端配置CORS响应头，允许Flutter Web所在的域名/端口访问，必须添加的响应头至少包含：

  Access-Control-Allow-Origin: *  // 生产环境建议替换为你的实际业务域名
  Access-Control-Allow-Methods: POST, GET, OPTIONS
  Access-Control-Allow-Headers: Content-Type
  

2. 修复请求头拼写错误 #

你当前代码中请求头ContentType拼写不符合规范，标准键名为Content-Type，修正后的配置：

headers: <String, String>{
  'Content-Type': 'application/json; charset=UTF-8',
},

3. 补全必填业务参数 #

在请求体中添加服务端要求的Date Registered字段，注意字段名和格式要和服务端要求完全匹配，示例：

var requestBody = {
  // 原有字段保持不变
  'date_registered': DateTime.now().toIso8601String(), // 替换为服务端要求的实际字段名、格式
};

验证逻辑 #

完成以上修改后重新发送请求，即可正常拿到服务端响应，不再触发XMLHttpRequest报错，若有其他业务错误可根据响应提示调整参数即可。

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