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

Question

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

我一直在试图弄清楚如何处理以下 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}));

任何想法将不胜感激

Answer 1

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

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