Flutter调用PHP登录接口出现XMLHttpRequest错误无法运行怎么办

你遇到的XMLHttpRequest error是典型的跨域资源共享(CORS)限制问题，与http库版本无关，核心原因是浏览器同源策略会拦截不同域名/端口的请求，你的Flutter Web运行端口与PHP服务端口不一致触发了拦截，可按以下方案解决：

方案1：后端PHP接口配置CORS头（推荐，生产可用） #

在你的login.php文件最开头，原有业务代码前添加如下响应头：

<?php
// 允许跨域访问，生产环境请将*替换为你前端部署的实际域名
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
// 处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}
// 此处为你原有登录校验的业务代码
?>

方案2：本地调试临时禁用Flutter Web的CORS校验 #

如果仅本地调试不想修改后端，可通过启动参数禁用Chrome的安全校验：

• VSCode调试：在项目.vscode/launch.json的配置项中添加启动参数：

{
  "name": "Flutter",
  "type": "dart",
  "request": "launch",
  "args": ["--web-browser-flag", "--disable-web-security"]
}

• 命令行运行：直接执行命令

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

移动端运行额外配置 #

如果你是在安卓/iOS端运行出现该错误，需要添加网络权限：

• 安卓端：在android/app/src/main/AndroidManifest.xml的manifest标签下添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

如果你的接口是http协议而非https，还需要在application标签添加明文请求许可：

<application
    android:usesCleartextTraffic="true"
    ...>

• iOS端：在ios/Runner/Info.plist的dict标签下添加配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

真机测试注意事项 #

如果用手机真机测试，接口地址不能写localhost，需要替换为你电脑的局域网IP地址，例：http://192.168.3.20/localconnect/login.php

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