Flutter调用本地Flask开发API时出现XMLHttpRequest错误的问题排查与解决

核心原因：跨域资源共享（CORS）限制 #

你遇到的XMLHttpRequest错误，本质是浏览器的同源策略阻止了跨域请求——当你在Flutter Web环境中调用本地Flask API时，浏览器会检查请求的源（比如Flutter Web运行的http://localhost:8080）和API的源（http://127.0.0.1:5000）是否一致，不一致的话就会拦截响应。

为什么手动访问正常？因为直接在浏览器地址栏访问不属于AJAX请求，不受同源策略约束；而线上API通常都配置了CORS响应头，所以能正常调用。

解决方案一：给Flask配置CORS支持 #

这是最直接的解决办法，通过flask-cors扩展给你的API添加跨域允许的响应头：

1. 先安装依赖：

pip install flask-cors

2. 修改你的Flask代码，引入并初始化CORS：

from flask import Flask, request, jsonify
from flask_cors import CORS  # 导入CORS扩展

app = Flask(__name__)
CORS(app)  # 允许所有域名的跨域请求（开发环境下可以这么用，生产环境建议指定具体域名）

@app.route('/dosomething', methods=['GET'])
def API():
    result = {}
    user_input = str(request.args['query'])
    result['result'] = user_input
    return jsonify(result)

如果要更安全（比如生产环境），可以指定允许的源：

# 只允许Flutter Web的本地地址和其他可信域名
CORS(app, origins=["http://localhost:8080", "http://127.0.0.1:8080"])

解决方案二：修复Flutter端的URL编码问题 #

你的示例URL里包含空格和特殊字符，虽然Flutter的get方法可能自动处理，但手动规范编码能避免潜在问题：

推荐用Uri类来构建请求URL，它会自动帮你编码参数：

void api() async {
  final Uri requestUri = Uri(
    scheme: 'http',
    host: '127.0.0.1',
    port: 5000,
    path: '/dosomething',
    queryParameters: {'query': "This doesn't work!"},
  );
  
  final Response response = await get(requestUri);
  print(response.body);
}

额外排查：如果是Flutter移动端（Android/iOS） #

移动端本身没有同源策略限制，但可能存在HTTP请求的权限问题：

• Android：在android/app/src/main/AndroidManifest.xml的<application>标签里添加android:usesCleartextTraffic="true"（Android 9+默认禁用明文HTTP请求）
• iOS：在ios/Runner/Info.plist中添加：

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

不过根据你的描述，手动访问API正常、线上API能调用，移动端的问题概率较低，但可以作为备选排查项。

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