Flutter Web与DartPad报XMLHttpRequest错误，移动端正常求解决

问题核心原因 #

你遇到的ClientException: XMLHttpRequest error是**浏览器同源策略（CORS）**导致的：

• 移动端（安卓真机/模拟器）和Windows桌面端不受浏览器的CORS安全规则限制，因此请求可以正常完成；
• Web端（包括DartPad、Chrome/Edge）运行在浏览器环境中，浏览器会拦截跨域请求，除非目标服务器返回了允许当前域名的CORS响应头。
• 注意：你在请求头中添加的Access-Control-Allow-Origin等字段属于服务器响应头，前端请求时添加这些字段完全无效，反而可能触发额外的预检请求，加重问题。

可行解决方案 #

1. 配置目标服务器CORS（最优解决方案） #

联系listeningtogod.org的服务器管理员，在服务器上配置以下CORS响应头：

• 添加Access-Control-Allow-Origin: *（允许所有域名访问，适合公开资源），或者指定允许的具体域名（比如DartPad的域名、你本地开发的localhost:端口号）；
• 确保服务器能正确处理OPTIONS预检请求，返回200状态码及对应的CORS头。

2. 本地Web开发使用代理（针对VS Code运行场景） #

在Flutter项目中配置代理，绕过浏览器的CORS限制：

1. 在项目根目录创建web/proxy_config.json文件，内容如下：

   {
     "/SermonEngagement": {
       "target": "https://listeningtogod.org",
       "changeOrigin": true,
       "secure": false
     }
   }
   

2. 使用带代理参数的命令启动Web应用：

   flutter run -d chrome --web-proxy-url="http://localhost:8080"
   

   （注：需提前启动代理工具，如基于Node.js的http-proxy-middleware，或使用Flutter支持的代理配置方式）

3. DartPad临时测试方案 #

DartPad的域名不在目标服务器的CORS允许列表中，可采用以下临时方案：

• 使用第三方CORS代理服务（仅用于测试，注意数据安全）：将请求URL前缀改为代理服务地址，例如https://cors-anywhere.herokuapp.com/https://listeningtogod.org/SermonEngagement/TextFiles/xxx.json；
• 直接将JSON文件内容复制到DartPad中，作为本地静态数据进行测试。

代码优化建议 #

移除请求头中无效的CORS相关字段，保留必要的请求头即可：

// 修改后的请求头
Map<String,String>? userHeader = {
  "Accept": "application/json"
};

GET请求无需设置Content-type字段，该字段主要用于POST/PUT等带请求体的请求。

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