Question

我有一个来自Firebase云函数的<form method="post"> <input type="text" asp-for="LabNumberToFilter" list="labNumbers" placeholder="Select or enter a lab number"/> <datalist id="labNumbers"> @foreach (var labNum in Model.LabNumberListOptions) { <option value="@labNum"></option> } </datalist> <button type="submit" ... </form>函数，然后，当我从我的react应用（位于firebase托管）上发送发布请求时，控制台返回以下错误：

post

还有这个：

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.

我已经阅读了其他一些stackoverflow问题，但我不太理解。

index.js （firebase函数）

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

firebase.json

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);

package.json

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

我将很高兴澄清所有不清楚的地方，并根据要求添加更多代码。预先感谢。

Answer 1

您需要为云功能启用CORS。

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

const cors = require("cors");

然后，您还需要通过以下方式使快速应用程序使用它：

app.use(cors());

有关进一步的cors配置选项，请参见npm cors库reference

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

1 个答案: