Flutter Web发起API调用报XMLHttpRequest错误，PHP配置CORS仍未解决

• 先查看浏览器的具体错误提示：打开F12开发者工具的「控制台」和「网络」面板，找到对应API请求的CORS报错详情，浏览器会明确给出缺失的跨域配置项，比如是预检请求失败、请求方法不被允许、自定义请求头不被允许等。
• 验证响应头是否生效：查看网络面板中该请求的响应头，确认Access-Control-Allow-Origin头是否存在且值正确，如果没有出现该头，说明你PHP中配置的header被服务器层（Nginx/Apache）的规则覆盖了，需要修改服务器配置。
• 检查预检请求处理逻辑：Flutter Web发起的非简单请求会先发送OPTIONS方法的预检请求，你当前的PHP代码没有针对OPTIONS请求做处理，后端如果没有给OPTIONS请求返回正确的跨域头，会直接触发CORS错误。
• 排查本地调试限制：如果你本地用localhost端口启动Flutter Web，后端部署在其他域名下，部分浏览器的安全策略会额外限制跨域，可以先将Flutter Web部署到与后端同域名下测试，排除本地调试的特殊限制。

方案1：修正后端PHP跨域配置（推荐生产环境使用） #

完整的跨域配置需要覆盖预检请求和所有必要的跨域头，修改后的代码如下：

<?php
// 允许跨域源，生产环境建议替换为你的前端域名代替*
header("Access-Control-Allow-Origin: *");
// 允许的请求方法
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
// 允许的请求头，包含自定义头比如Authorization、Content-Type等
header("Access-Control-Allow-Headers: *");
// 允许携带凭证，如果你需要传Cookie的话加这个，注意此时Origin不能用*
// header("Access-Control-Allow-Credentials: true");

// 处理预检请求，直接返回200无需走业务逻辑
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

require_once("connect.php");
$result = $db->query("SELECT * FROM feedback ORDER BY id DESC")->fetchAll();
echo json_encode($result);
?>

配置完成后清空浏览器缓存再测试，确认响应头已经携带正确的跨域配置。

方案2：本地调试临时绕过CORS限制 #

如果是本地开发阶段不想修改后端配置，可以在启动Flutter Web时添加禁用浏览器安全策略的参数，该方案仅用于本地调试，禁止在生产环境使用：

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

方案3：使用反向代理 #

如果你无法修改后端配置，可以在前端部署的服务器上配置反向代理，将API请求的路径代理到后端服务，此时前端和后端的请求是同域名，天然不存在跨域问题。比如用Nginx部署时添加如下配置：

location /api/ {
    proxy_pass https://你的后端域名/;
}

修改Flutter侧的请求地址为同域名下的/api/get.php即可。

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