Netlify托管Web端调用Firebase Cloud Function失败CORS问题求解

解决步骤 #

1. 确认cors依赖已安装
   在项目的functions目录下执行以下命令安装cors包，未安装依赖会导致中间件执行失败，无法进入回调逻辑，自然不会打印内部日志：

npm install cors

2. 补全CORS配置支持预检请求
   浏览器发起跨域请求前会先发送OPTIONS类型的预检请求，默认配置未处理该请求会导致跨域失败，修改cors初始化配置：

const cors = require('cors')({
    origin: true,
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
});

3. 无依赖手动配置方案（更稳定，无需引入cors包）
   如果依赖安装或者中间件配置仍有问题，可以直接手动设置响应头处理跨域，代码如下：

functions.logger.info("Hello logs!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
exports.createAuthToken = functions.https.onRequest((request, response) => {
    // 手动设置跨域头
    response.set('Access-Control-Allow-Origin', '*');
    response.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    response.set('Access-Control-Allow-Headers', 'Content-Type');

    // 直接处理预检请求
    if (request.method === 'OPTIONS') {
        return response.status(204).send('');
    }

    // 业务逻辑
    functions.logger.info("Hello logs >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>!", { structuredData: true });
    response.send("Hello from Firebase!");
});

4. 校验调用地址
   注意报错信息中的函数名是create-auth-aoken，和实际部署的create-auth-token拼写不一致，调用时要确认函数名、参数完全匹配。

内容的提问来源于stack exchange，提问作者Mr. Robot