Vue.js 3用Fetch发POST至Firebase云函数未传数据问题

1. 先搞定CORS预检请求 #

浏览器发的204是OPTIONS预检请求，属于跨域请求的正常流程，但如果云函数没正确响应OPTIONS，会导致后续POST请求的数据传不过去。

给云函数加CORS处理，最简单的方式是用cors中间件：

// 云函数代码（Node.js）
const functions = require('firebase-functions');
const cors = require('cors')({ origin: true }); // 先执行npm install cors安装依赖

exports.helloWorld = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    if (req.method === 'POST') {
      // 从req.body拿数据
      const { name, gender } = req.body;
      console.log('收到的数据：', { name, gender });
      // 必须返回JSON响应，别返回空内容（否则会是204状态）
      res.status(200).json({ success: true, receivedData: { name, gender } });
    } else {
      res.status(405).json({ error: '只接受POST请求' });
    }
  });
});

2. 确保请求体被正确解析 #

如果不用Express框架，Firebase云函数默认会解析JSON请求体，但前提是前端请求的Content-Type是application/json（你已经设置了，这部分没问题）。如果用Express封装云函数，要记得加express.json()中间件：

const express = require('express');
const functions = require('firebase-functions');
const app = express();

app.use(express.json()); // 解析JSON请求体

app.post('/', (req, res) => {
  const data = req.body;
  console.log(data);
  res.json({ success: true, data });
});

exports.helloWorld = functions.https.onRequest(app);

3. 前端代码优化（可选） #

你当前的代码混用了await和.then()，虽然不影响功能，但统一写法更清晰：

const requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name, gender }) // 简化对象写法
};

try {
  const response = await fetch('...url/to/function/helloWorld', requestOptions);
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  const data = await response.json();
  console.log(data);
} catch (err) {
  console.error('请求出错：', err);
}

4. 关于两次请求的说明 #

• 第一次OPTIONS请求：浏览器跨域前的预检，不带请求体，所以日志里看到“无负载”是正常的，只要云函数正确响应OPTIONS（返回200或204），浏览器就会发第二次请求。
• 第二次POST请求：实际带数据的请求，如果之前CORS配置不对，这次请求的响应会异常。

5. 之前用req.query的问题 #

req.query是拿URL上的查询参数（比如?name=张三&gender=男），但你是把数据放在请求体里，所以用req.query肯定拿不到，改成req.body是对的，但得先把CORS和请求体解析的问题解决。

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