Firebase Function报No 'Access-Control-Allow-Origin'跨域问题如何解决

问题根因 #

• Postman不受浏览器同源策略限制，所以可以正常调用接口，而浏览器会自动校验跨域请求的响应头是否符合CORS规则
• 你当前的服务端代码仅初始化了cors配置，没有实际调用cors中间件处理请求，导致响应没有携带CORS相关头部，被浏览器拦截
• 代码中response.setHeader(headers)是错误写法：response是调用第三方支付接口返回的结果对象，不是Firebase Functions的响应对象res，无法设置响应头

前置依赖检查 #

首先进入项目的functions目录，执行以下命令确认cors依赖已安装：
npm install cors

修复后的服务端代码 #

// cors 模块导入放在函数外部，避免每次请求重复加载
const cors = require('cors')({
  // 生产环境建议替换为你实际的前端域名，例如 'https://你的线上域名'
  origin: '*'
});

exports.createRequest = functions.https.onRequest((req, res) => {
  // 先调用cors中间件处理跨域预检请求、自动注入CORS响应头
  cors(req, res, () => {
    // 原有业务逻辑放在cors回调内
    var options = {
      method: 'POST',
      uri: 'https://test.instamojo.com/api/1.1/payment-requests/',
      form: payload,
      headers: insta_headers,
      json: true
    };

    return rp(options)
      .then(function (response) {
        console.log(response);
        if (response.success) {
          return db.collection('PAYMENT_REQUESTS').doc(response.payment_request.id).set({
            LONG_URL: response.payment_request.longurl,
            REQUEST_CREATED_AT: response.payment_request.created_at,
            PAYMENT_STATUS: "STARTED"
          }, {
            merge: true
          }).then(function () {
            // cors中间件已经自动处理响应头，不需要手动设置
            res.status(200).send({
              STATUS: "SUCCESS",
              RESPONSE: response.payment_request.longurl
            });
          })
          .catch(function (error) {
            res.status(200).send({
              STATUS: "ERROR",
              RESPONSE: error
            });
          });
        } else {
          return res.status(403).send('Forbidden!');
        }
      })
      .catch(function (e) {
        console.log("ERROR" + e);
        res.status(200).send({
          STATUS: "ERROR",
          RESPONSE: e
        });
      });
  });
});

可选优化 #

• 生产环境禁止使用origin: '*'，明确指定允许的前端域名，避免接口被恶意调用
• 如果业务场景需要，可以直接使用Firebase提供的onCall类型云函数，框架会自动处理CORS逻辑，不需要手动引入cors库

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