使用 Cloud Functions for Firebase 时出现 CORS 错误

Posted 2023-03-04

【中文标题】使用 Cloud Functions for Firebase 时出现 CORS 错误

【英文标题】：CORS error when using Cloud Functions for Firebase

【发布时间】：2021-08-14 05:39:37

【问题描述】：

这是我提出的第一个问题，如果格式不正确，我深表歉意。

我一直在试图弄清楚如何处理以下 CORS 错误以及 CORS 预检错误：

...已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头的值“https://example.com/”不等于提供的来源。

在过去的几天里，我一直在阅读关于这个主题的每个问题，以及我在 CORS/Cloud Functions/Axios/etc 上可以找到的所有其他文档。我正在使用 React、Node、Express、Axios、Google Firebase 托管和 Google Cloud Functions。

我正在尝试访问 PayPal API 以获取不记名令牌以发出进一步的 API 请求。我了解与请求标头有关的一些代码可能是多余的。我一直在尝试对此扔任何东西。

有人有什么想法吗？

节点文件 - index.js

const axios = require("axios");
const express = require("express");
const cors = require("cors")( origin: true );

const app = express();

app.use(cors());
app.use(express.json());

app.post("/v1/oauth2/token/", cors(), (req, res) => 
  res.set("Access-Control-Allow-Origin", "https://example.com/");
  var data = qs.stringify(
    grant_type: "client_credentials",
  );

  var config = 
    method: "post",
    url: "https://api-m.sandbox.paypal.com/v1/oauth2/token/",
    headers: 
      "Access-Control-Allow-Origin": "https://example.com/",
      Authorization:"xyz",
      "Content-Type": "application/x-www-form-urlencoded",
    ,
    data: data,
  ;

  axios(config)
    .then(function (response) 
      let bearerToken = response.data.access_token;
      res.status(201).send(bearerToken);
    )
    .catch(function (error) 
      console.log(error);
    );
);

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

反应文件 - payment.js

import axios from "../axios/axios";

 const oneTimePaypalPayment = async () => 
    const response = await axios.post("/v2/checkout/orders");
    console.log(response);
  ;

axios 文件 - axios.js

import axios from "axios";

const instance = axios.create(
  headers: 
    "Access-Control-Allow-Origin": "https://example.com/",
    "Access-Control-Allow-Headers": "https://example.com/",
  ,
  baseURL: "https://us-central1-example.cloudfunctions.net/api/"
);

export default instance;

我的尝试

我尝试使用通配符“*”只是为了让它工作但没有运气。我在另一个答案中读到 Google Cloud Functions 无论如何都无法识别“*”。我还尝试了下面的所有代码，以及许多其他方法来操作请求标头上的 Access-Control-Allow-Origin

const allowCrossDomain = function (req, res, next) 
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  
    next();
  ;

app.use(allowCrossDomain);

app.all("*", (req, res, next) => 
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
    next();
  );

  const corsOptions = 
    origin: "https://example.com/",
  ;

app.use(cors(corsOptions))

app.options("/v1/oauth2/token", cors(corsOptions));

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

任何想法将不胜感激

【问题讨论】：

使用origin: "https://example.com"——不带斜杠

感谢您的评论！我刚刚尝试过，不幸的是它不起作用。我将继续使用原点和斜杠，如果发生任何事情，请通知您。

【参考方案1】：

在您正在导出或使用的云功能中，以下用于 Origin ：

exports.your function = async (req, res) => 
  res.set('Access-Control-Allow-Origin', '*');