Firebase Cloud Functions创建用户接口CORS错误排查求助

Hey there! Let's work through all the issues you're hitting with your createAccount function—we'll fix them one by one:

1. 先搞定CORS问题 #

CORS预检失败是因为你的函数没有处理OPTIONS请求，这是浏览器跨域请求的必要步骤。最简单的方式是用cors包来处理：

• 首先在你的functions目录下安装依赖：

  npm install cors
  

• 然后修改createAccount.js，引入并使用cors中间件：

  import * as functions from 'firebase-functions'
  import cors from 'cors'
  import { createAuthUser } from './createAuthUser'
  import { createTemporaryUser } from './createTemporaryUser'
  
  // 初始化cors，允许本地开发域名
  const corsHandler = cors({ origin: 'http://localhost:3000' })
  
  export const createAccount = functions.https.onRequest(async (req, res) => {
    // 用cors处理请求，先通过预检
    corsHandler(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(`Error! ${error.message}`)
      }
    })
  })
  

2. 解决newUserInfo为undefined的问题 #

Firebase HTTPS Functions不会自动解析JSON请求体，所以你需要手动添加解析逻辑。有两种方式：

方式一：用Express框架处理（推荐） #

把函数改成Express应用，这样可以方便使用中间件：

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

const app = express()
app.use(cors({ origin: 'http://localhost:3000' }))
app.use(express.json()) // 自动解析JSON请求体

app.post('/', async (req, res) => {
  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(`Error! ${error.message}`)
  }
})

export const createAccount = functions.https.onRequest(app)

方式二：手动解析请求体 #

如果不想用Express，可以直接解析req.rawBody：

// 在createAccount的try块里替换第一行
const body = JSON.parse(req.rawBody)
const { newUserInfo } = body

3. 修复响应格式的错误 #

日志里的两个错误都是响应写法不对：

• 弃用提示：res.send(status, body)是旧版Express写法，必须改成res.status(status).send(body)
• RangeError：res.status(500).send('Error!', error)里send只接受一个参数，第二个参数会被误判为状态码，所以要把错误信息合并成一个字符串，或者返回JSON：

  // 推荐返回JSON格式，前端更容易处理
  return res.status(500).json({ error: `Error! ${error.message}` })
  

4. 排查"connection error" #

这个错误通常是前面的问题导致的连锁反应：

• 当请求体解析失败，或者CORS预检不通过，浏览器会中断连接
• 函数内部未捕获的错误也会导致连接异常
  解决完前面的CORS、请求体解析和响应格式问题后，这个错误应该会自动消失。

额外排查小贴士 #

• 检查前端发送请求时，是否设置了Content-Type: application/json头，否则后端无法正确解析JSON请求体
• 在Firebase控制台的函数日志里查看完整的错误栈，能帮你定位更细节的问题
• 测试时可以先用Postman直接调用函数接口，排除前端跨域的干扰，确认函数本身逻辑正常

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