Flutter 使用 Chopper 发请求时Web端出现XMLHttpRequest错误怎么解决？

错误原因 #

该错误是浏览器同源策略限制导致的CORS跨域问题：

• 桌面端应用不存在浏览器同源策略校验，所以请求可以正常发送
• Flutter Web运行在浏览器环境下，跨域请求时要求服务端返回正确的CORS响应头，否则浏览器会直接拦截请求，抛出XMLHttpRequest错误
• 你当前在请求头中添加Access-Control-Allow-Origin属于错误配置：该头是服务端返回给客户端的响应头，写在客户端请求头中没有任何作用，反而可能触发额外的预检请求报错。

解决方法 #

方法1：配置Open Server Panel服务端CORS（推荐，生产/开发都可用） #

你可以选择全局配置站点规则，或者单独在PHP接口中添加配置：

全局配置（Apache环境）

• 打开Open Server Panel设置，选择当前使用的站点，进入「高级」配置页
• 在Apache自定义配置中添加如下规则：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

• 保存后重启Open Server Panel服务生效。

全局配置（Nginx环境）

• 同样进入站点高级配置页，在Nginx自定义配置中添加：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
if ($request_method = OPTIONS) {
    return 200;
}

• 保存后重启服务生效。

单接口PHP配置

你也可以直接在所有PHP接口文件的最顶部添加CORS配置代码：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}
// 原有接口逻辑写在下方
?>

方法2：修改客户端错误配置 #

删除@Post注解中错误添加的CORS请求头，修改后的代码如下：

@Post(path: '/login_user.php')
Future<Response<User>> loginUser(@Body() var data);

方法3：本地开发临时禁用浏览器安全策略（仅用于测试） #

如果是本地开发阶段不想修改服务端配置，可以启动Flutter Web时添加参数禁用浏览器安全校验：

• Windows端运行命令：flutter run -d chrome --web-browser-flag "--disable-web-security"
• macOS端运行命令：flutter run -d chrome --web-browser-flag --disable-web-security --web-browser-flag --user-data-dir=/tmp/flutter_dev

注意：该方法仅适用于本地开发调试，生产环境必须配置服务端CORS规则。

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