Flutter调用Node.js本地REST API遇XMLHttpRequest错误的解决

这事儿我熟！你遇到的几乎可以肯定是**CORS（跨域资源共享）**问题——Flutter Web运行在浏览器环境中，浏览器的同源策略会阻止从一个域名/端口发起的请求访问另一个不同域名/端口的资源。你的Node.js API跑在8080端口，而Flutter Web默认跑在5000端口，这就触发了跨域拦截，也就是你看到的XMLHttpRequest错误。

第一步：确认CORS错误细节 #

先打开浏览器开发者工具（按F12），切换到「Console」标签页，你大概率会看到类似这样的明确提示：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这就坐实了是CORS的锅。

第二步：给Express API配置CORS中间件 #

解决这个问题最直接的方法是给你的Express项目添加CORS支持：

1. 先安装cors依赖包：

   npm install cors
   

2. 在你的Express入口文件中引入并启用CORS：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 开发环境可以直接允许所有来源（方便快速测试）
   app.use(cors());
   
   // 生产环境建议严格指定允许的来源（更安全），比如Flutter Web的运行地址
   // app.use(cors({
   //   origin: ['http://localhost:5000', 'http://192.168.100.4:5000']
   // }));
   
   // 你的路由逻辑
   app.get('/foodRecipe/', (req, res) => {
     // 处理请求并返回数据
   });
   
   // 关键：让服务器监听所有网卡（0.0.0.0），而非仅localhost
   app.listen(8080, '0.0.0.0', () => {
     console.log('API服务器运行在 http://0.0.0.0:8080');
   });
   

第三步：排查其他潜在问题 #

如果配置CORS后还是不行，检查以下几点：

• 防火墙拦截：确保本地防火墙（比如Windows Defender防火墙、Mac防火墙）允许Node.js程序通过8080端口，或者临时关闭防火墙做测试。
• 服务器绑定地址：代码里的0.0.0.0很重要，它让服务器绑定所有网卡，这样局域网内的设备（包括你的Flutter Web）才能通过局域网IP访问到API。如果只绑定localhost，只有本机用localhost访问才有效，用局域网IP会失败。
• Flutter Web运行地址：如果用flutter run -d chrome启动，默认地址是http://localhost:5000；如果是部署后的静态文件，要确认部署地址在CORS的允许列表里（如果用了指定origin的配置）。

第四步：验证连接 #

1. 重启你的Node.js服务器，确保CORS配置生效。
2. 在Flutter Web中调用API时，使用对应地址：
   • 本机测试：http://localhost:8080/foodRecipe/或http://127.0.0.1:8080/foodRecipe/都可以。
   • 局域网测试：用你的局域网IP（比如192.168.100.4:8080/foodRecipe/）。

示例Flutter调用代码：

import 'package:http/http.dart' as http;

Future<void> fetchRecipes() async {
  try {
    final response = await http.get(Uri.parse('http://192.168.100.4:8080/foodRecipe/'));
    if (response.statusCode == 200) {
      // 成功获取数据，处理逻辑
      print('获取食谱成功！');
    } else {
      throw Exception('请求失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    print('请求出错：$e');
  }
}

生产环境注意事项 #

上线时绝对不要直接用app.use(cors())允许所有来源，一定要指定具体的生产域名，比如：

app.use(cors({
  origin: 'https://your-flutter-web-domain.com'
}));

这样能避免潜在的安全风险。

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