已配置Express CORS仍遇Firebase API跨域错误？问题排查

问题场景 #

尝试基于Firestore数据库搭建Express API，前端调用时持续触发CORS错误：

Access to XMLHttpRequest at 'myApi' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

后端API代码如下：

const functions = require("firebase-functions");
const admin = require("firebase-admin")
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});


const express = require("express")
const cors = require("cors")


//Main app
const app = express()
app.use(cors({origin:true}));

//Main database reference
const db = admin.firestore()

//Routes
app.get('/', (req,res) =>{
    return res.status(200).send('Hello, world!')
})
//Create => post()
app.post("/api/create", (req,res) => {
    (async () => {
        try{
            await db.collection('userDetails').doc(`/${Date.now()}/`).create({
                id: Date.now(),
                name: req.body.name,
                mobile:req.body.mobile,
                address: req.body.address
            })
            return res.status(200).send({status:'Success', msg: 'Data Saved'})
        }catch(err){

        }
    })()
})


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

后端代码验证 #

从代码来看，后端已经正确配置了CORS中间件：

app.use(cors({origin:true}));

该配置会自动为所有响应添加Access-Control-Allow-Origin: *头，理论上不会出现CORS相关问题。

错误根源排查 #

报错提示缺少CORS头，但后端配置无误，说明请求并未实际到达后端的Express路由。进一步排查发现，问题出在前端的API调用地址存在拼写错误，导致请求发送到了错误的端点（或未触发Express的路由处理），此时返回的响应由Firebase Functions默认处理，不会带上配置的CORS头，从而触发CORS错误。

解决方案 #

修正前端API调用的地址拼写，确保请求能正确命中后端的Express路由，此时后端的CORS配置会正常生效，错误即可解决。

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