Firebase云函数/createAccount端点CORS及状态码错误排查求助

看起来你遇到了两个关联的问题：函数内部的HTTP状态码错误，以及CORS跨域拦截。咱们一步步拆解处理：

1. 先解决 ERR_HTTP_INVALID_STATUS_CODE 错误 #

从日志里的 Invalid status code: Error! 就能定位原因：你在catch块里的响应写法出错了。Express的res.send()方法只接受一个参数，你写的res.status(500).send('Error!', error)会把第二个参数error当成状态码来处理，而字符串'Error!'被误传成了状态码，自然触发无效状态码错误。

修复代码：

try {
  // ... 原有逻辑
} catch (error) {
  // 改成单参数传递，把错误信息包装成对象或字符串
  return res.status(500).send({ message: 'Error!', detail: error.message })
  // 或者简化写法
  // return res.status(500).send(`Error occurred: ${error.message}`)
}

2. 解决 newUserInfo 为 undefined 的问题 #

日志里显示show the info: undefined，说明后端没拿到前端传的请求体，常见原因有两个：

• 前端请求未设置正确的Content-Type：如果前端用fetch/axios发送JSON数据，必须设置Content-Type: application/json头，否则云函数无法解析JSON格式的请求体。比如前端fetch请求要这么写：

  fetch('https://us-central1-vue-photoapp-api.cloudfunctions.net/createAccount', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json' // 这个头必须加
    },
    body: JSON.stringify({ 
      newUserInfo: { emailAddress: 'your-test@mail.com', password: 'test123' } 
    })
  })
  

• 前端传递的键名不匹配：确保前端传的顶层键是newUserInfo，和后端const { newUserInfo } = req.body的解构键完全一致。

3. 处理CORS跨域拦截问题 #

CORS错误的直接原因是云函数没返回Access-Control-Allow-Origin响应头，但很多时候是因为函数内部报错（比如上面的状态码错误），导致正常的CORS头没被设置。所以先修复上面的错误，再添加CORS处理：

方法一：手动设置CORS头（适合简单场景） #

在函数开头添加CORS头，并处理预检OPTIONS请求：

export const createAccount = functions.https.onRequest(async (req, res) => {
  // 设置允许跨域的源，本地开发填你的前端地址
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许的请求方法
  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 允许的请求头
  res.set('Access-Control-Allow-Headers', 'Content-Type');

  // 处理浏览器的预检OPTIONS请求，直接返回204状态码
  if (req.method === 'OPTIONS') {
    res.status(204).send('');
    return;
  }

  // ... 原有try/catch逻辑
})

方法二：使用cors包（更规范的方式） #

1. 先安装依赖：npm install cors
2. 在函数中引入并使用：

import * as functions from 'firebase-functions'
import cors from 'cors'
import { createAuthUser } from './createAuthUser'
import { createTemporaryUser } from './createTemporaryUser'

// 配置允许的跨域源
const corsMiddleware = cors({ origin: 'http://localhost:3000' })

export const createAccount = functions.https.onRequest(async (req, res) => {
  // 先通过cors中间件处理跨域
  corsMiddleware(req, res, async () => {
    try {
      const { newUserInfo } = req.body
      const authUid = await createAuthUser(newUserInfo)
      await createTemporaryUser(authUid, newUserInfo)
      return res.status(200).send('Success!')
    } catch (error) {
      return res.status(500).send({ message: 'Error!', detail: error.message })
    }
  })
})

排查顺序建议 #

1. 先修复catch块的响应写法，解决函数内部的状态码错误
2. 验证前端请求的Content-Type和参数格式，确保newUserInfo能正确传递到后端
3. 添加CORS处理逻辑，解决跨域拦截问题

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