从 Firebase 托管发布到 Firebase 云功能时没有出现“Access-Control-Allow-Origin”错误

Posted 2023-03-04

【中文标题】从 Firebase 托管发布到 Firebase 云功能时没有出现“Access-Control-Allow-Origin”错误

【英文标题】：Getting No "Access-Control-Allow-Origin" Error when posting from firebase hosting to firebase cloud functions

【发布时间】：2020-11-09 22:51:06

【问题描述】：

我有一个来自 firebase 云函数的 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

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

index.js（firebase 函数）

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"

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

【问题讨论】：

"我已经阅读了其他一些 *** 问题，但我并不真正理解它们。" - 您可能需要编辑问题以解释一下究竟是什么你读了，为什么它令人困惑。因为您在这里的问题可能只是那些其他问题的重复，除非您解释为什么这里的问题不同，否则它将作为重复关闭。看起来您开始在代码中实现 cors 模块，然后将其注释掉。为什么？

@DougStevenson 我正在尝试测试它，我真的不明白我是否应该实现 cors 模块，是否有用。我想问是否有任何方法可以将内容从firebase托管网页发布到firestore。因为其他一些帖子似乎只是试图解决localhost的cors问题，而不是实际网站。因为如果实际网站出现cors问题，用户将无法使用这些功能。

您确实需要在后端实现 cors，我建议从 cors 模块文档开始。 npmjs.com/package/cors

【参考方案1】：

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

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

const cors = require("cors");

然后，您还需要让您的 express 应用使用它：

app.use(cors());

查看 npm cors 库 reference 了解更多 cors 配置选项