从 firebase 主机发布到 firebase 云功能时，没有出现“Access-Control-Allow-Origin”错误

Question

我有一个来自 firebase 云函数的 function post ，然后，当我从我的 react 应用程序（托管在 firebase 托管上）发送帖子请求时，控制台返回以下错误：

Access to XMLHttpRequest at 'https://asia-east2-example.cloudfunctions.net/api/something' from origin 'https://example.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

还有这个：

POST https://asia-east2-example.cloudfunctions.net/api/something net::ERR_FAILED

我已经阅读了其他一些 stackoverflow 问题，但我并不真正理解它们。

index.js （火力基地功能）

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const firebase = require("firebase");
const app = require("express")();
const cors = require("cors")({ origin: true });

const config = {
  apiKey: "XXXXXXXXXXXXXXXXXXX",
  authDomain: "xampleee.firebaseapp.com",
  databaseURL: "https://example.firebaseio.com",
  projectId: "example",
  storageBucket: "example.appspot.com",
  messagingSenderId: "1111111111111",
  appId: "1:1111111111111:web:1111111111111",
  measurementId: "X-XXXXXXXXXXX",
};

admin.initializeApp();
firebase.initializeApp(config);

...

app.post("/response", (req, res) => {
  // cors(req, res, () => {
  let name = "";
  if (req.body.name !== null && req.body.name !== undefined) {
    name = req.body.name;
  } else {
    name = "anonymous";
  }

  const newResponse = {
    answer: req.body.answer,
    answerNames: req.body.answerNames,
    user: name,
    dateAnswered: new Date().toISOString(),
  };

  admin
    .firestore()
    .collection("Responses")
    .add(newResponse)
    .then((doc) => {
      const resResponse = newResponse;
      resResponse.responseId = doc.id;
      res.json(resResponse);
    })
    .catch((err) => {
      res.status(500).json({
        error: "Something went wrong",
      });
      console.error(err);
    });
  // });
});

...

exports.api = functions.region("asia-east2").https.onRequest(app);

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "8"
  },
  "dependencies": {
    "firebase": "^7.15.0",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.7.0"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.0"
  },
  "private": true,
  "homepage": "./",
  "proxy": "https://asia-east2-example.cloudfunctions.net/api"
}

我很乐意澄清任何不清楚的地方，并根据要求包含更多代码。 提前致谢。

Answer 1

您需要为您的 Cloud Functions 启用 CORS。

您应该像这样导入 npm cors 库：

const cors = require("cors");

然后，您还需要让您的快速应用程序使用它：

app.use(cors());

有关更多 cors 配置选项，请参阅 npm cors 库参考