Flutter使用Dio库Web端报XMLHttpRequest错误安卓端正常如何解决？

问题核心原因 #

你遇到的XMLHttpRequest报错本质是Web端的跨域资源共享(CORS)限制，你当前的代码存在核心错误：所有Access-Control-*开头的头都是服务端响应时返回的头，你把这些头加在客户端请求头里完全无效，反而会触发额外的预检OPTIONS请求，进一步加剧跨域问题。

解决步骤 #

• 第一步：先删除所有你手动添加的CORS相关请求头，修正后的初始Dio配置如下：

Dio dio = Dio();
var response = await dio.post('http://45.79.124.182/app_php/PagarGuru_test/requestAdd.php');

• 第二步：对齐Dio和http库的请求格式，http库默认POST请求的Content-Type是application/x-www-form-urlencoded，而Dio默认是application/json，如果你的服务端未适配JSON格式请求，会触发预检失败，强制对齐格式测试：

import 'package:dio/dio.dart';

Dio dio = Dio();
dio.options.contentType = Headers.formUrlEncodedContentType;
var response = await dio.post('http://45.79.124.182/app_php/PagarGuru_test/requestAdd.php');

• 第三步：本地开发阶段可临时禁用浏览器跨域安全策略绕过限制，运行Web项目时使用以下命令：

flutter run -d chrome --web-browser-flag "--disable-web-security" --web-browser-flag "--disable-site-isolation-trials"

该方案仅适用于本地开发调试，不可用于生产环境。

• 第四步：服务端配置正确的CORS规则，在你的PHP接口代码顶部添加以下配置，同时单独处理OPTIONS预检请求直接返回200状态码：

// 处理预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token, locale');
    http_response_code(200);
    exit;
}
// 正常业务逻辑返回的头也需要加CORS配置
header('Access-Control-Allow-Origin: *');

• 第五步：生产环境部署时如果不想修改服务端配置，可配置前端反向代理，比如用Nginx部署Flutter Web产物时，添加如下配置将接口请求转发到后端服务，避免跨域：

location /api/ {
    proxy_pass http://45.79.124.182/;
}

修改Dio的请求路径为/api/app_php/PagarGuru_test/requestAdd.php即可。

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