Flutter Web调用Dio.Post请求本地Node.js API返回空响应问题求解

1. 确认Node.js端参数解析逻辑与请求格式匹配 #

• 从你的Postman请求日志可以看到，路径带了/login2?user=10002&password=123456，说明Postman是将参数放在URL查询参数中传输，但你Flutter端的代码都是将参数放在POST请求Body中传输，先检查Node端是不是只从req.query取参数，没有读取req.body的逻辑。
• 如果你使用的是Express框架，必须提前配置对应格式的Body解析中间件，否则req.body默认是空对象{}，和你现在的打印结果完全匹配：

  // 解析JSON格式请求Body
  app.use(express.json())
  // 解析表单格式请求Body
  app.use(express.urlencoded({extended: true}))
  

2. 排查Flutter Web跨域（CORS）问题 #

Flutter Web在浏览器中运行时发请求到本地Node服务属于跨域请求，浏览器会先发送OPTIONS预检请求，如果Node端没有放行跨域配置，实际POST请求会被拦截，导致参数传不到、无响应：

• 可以直接安装cors包快速配置：

  const cors = require('cors')
  app.use(cors()) // 开发环境可直接全放行，生产环境再限制来源域名
  

• 也可以手动配置响应头处理OPTIONS请求：

  app.all('*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Headers', 'Content-Type')
    res.header('Access-Control-Allow-Methods', 'POST,GET,OPTIONS')
    if(req.method === 'OPTIONS') return res.sendStatus(200)
    next()
  })
  

3. 修正Flutter端请求逻辑 #

你后续调整的请求代码存在逻辑错误：你先执行了await request.send()发送请求，之后才调用request.headers.addAll(headers)添加请求头，导致实际发出去的请求没有携带你配置的Content-Type头，参数格式无法被服务端识别。

• 正确的Dio POST传JSON参数示例：

  Future post(String path, Map<String, dynamic> data) async {
    try {
      final result = await _dio.post(
        "http://localhost:8000$path",
        data: data,
        options: Options(
          contentType: Headers.jsonContentType,
        ),
      );
      return result.data;
    } catch (e) {
      print(e);
      throw ('Error en el POST');
    }
  }
  

• 如果你想和Postman逻辑对齐快速验证，可以直接把参数放到URL查询参数中传输：

  final response = await http.post(
    Uri.parse('http://localhost:8000/login2').replace(
      queryParameters: {'user': id, 'password': password}
    ),
  );
  

4. 快速验证手段 #

• 打开Flutter Web运行的浏览器调试控制台，切换到「网络」标签，对比Flutter发出的POST请求和Postman请求的请求头、请求Body差异，可快速定位问题。
• 在Node端打印req.method、req.headers、req.query、req.body四个字段，可明确判断请求是否到达服务端、参数的存储位置和格式是否正确。

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