Flutter Web无法读取Node.js API数据问题求助

云上老周

2026-6-23

解决方案：Flutter Web无法读取Node.js API数据（GET请求失败）

问题核心是浏览器同源策略（CORS）限制：Flutter Web运行在浏览器环境中，会严格遵循跨域规则，而移动端、Postman不受此限制。POST能正常使用说明后端对POST请求的CORS配置生效，但GET请求的CORS配置缺失或不完整。

1. 修复Node.js后端的CORS配置

使用cors中间件统一处理跨域请求，确保包含GET方法：

步骤1：安装cors依赖

npm install cors

步骤2：在Express项目中配置CORS

在后端入口文件（如app.js/server.js）中添加以下代码，放在路由定义之前：

const cors = require('cors');
const express = require('express');
const app = express();

// 开发环境配置允许Flutter Web的运行地址（默认端口5000）
const corsConfig = {
  origin: ['http://localhost:5000', 'http://192.168.xxx.xxx:5000'], // 替换成你的Flutter Web实际访问地址
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 明确包含GET方法
  allowedHeaders: ['Content-Type', 'Authorization']
};

app.use(cors(corsConfig));

// 后续路由定义...
app.get('/api/v1/product/getall', (req, res) => {
  // 你的接口逻辑
});

注意：生产环境请勿直接使用app.use(cors())允许所有源，需指定具体的前端域名。

2. 修正Flutter Web的请求地址

避免混用127.0.0.1和localhost，统一使用本地IP地址（如192.168.xxx.xxx）作为API baseURL：

const baseURL = 'http://192.168.xxx.xxx'; // 替换成你的后端服务器本地IP

Future<List<Product>> fetchProducts() async {
  log("hit");
  final url = Uri.parse('$baseURL:2000/api/v1/product/getall');

  try {
    final response = await http.get(url);
    // ... 现有逻辑不变
  } catch (error) {
    log('Error fetching products: $error');
    return [];
  }
}