Firebase CORS 策略仅针对某些功能阻止答案

【问题标题】：Firebase CORS policy blocking only for some functionsFirebase CORS 策略仅针对某些功能阻止
【发布时间】：2020-10-24 14:29:20
【问题描述】：

我正在使用 FireBase 功能，但出现 CORS 策略错误，但并非来自所有方法。例如，对于我的 GET 和 POST（创建新对象），它会正确执行和响应，但是，当我尝试删除对象或编辑它时，我会立即收到 CORS 策略错误... 我得到的错误： 对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

服务器端

const cors = require('cors');
app.use(cors);
    // GET method to retrieve a list of CarPlates
    app.get("/getCarPlates", async (req, resp) => {
      await db
        .collection("Car-Plates")
        .orderBy("Name", "desc")
        .get()
        .then((data) => {
          let plates = [];
          data.forEach((plate) => {
            plates.push({
              Id: plate.id,
              Name: plate.data().Name,
              Surname: plate.data().Surname,
              PlateNr: plate.data().PlateNr,
            });
          });
          return resp.json(plates);
        })
        .catch((err) => console.log(err));
    });


    // Getting a CORS Policy error here.
    app.post("/setCarPlate", async (req, resp) => {
      await db
        .collection("Car-Plates")
        .doc(req.body.id)
        .set({
          Name: req.body.name,
          Surname: req.body.surname,
          PlateNr: req.body.platenr,
        })
        .then((success) =>
          resp.json({
            message: `Plate ${success.id} has been modified successfully`,
          })
        )
        .catch((err) => {
          resp.status(400).json(`Something went wrong.`);
          console.log(err);
        });
    });

客户端（ReactJs）

  api
    .post("/setCarPlate", {
      name: "Front-end",
      surname: "to REST",
      platenr: "Edited",
    })
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err));

我也试过添加这个：

 app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-Requested-With,content-type"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  next();
});

//app.options("*", cors()); // include before other routes
app.use(cors);
app.options("/setCarPlate", cors());

【问题讨论】：

您是否尝试过通过 Postman 执行您的 API？如果没有，请尝试看看它是否给出相同的错误。
@SagarDarekar 我做到了。每种方法都按预期工作。邮递员不需要 CORS

标签： node.js reactjs firebase express

【解决方案1】：

我已经解决了这个问题。非常感谢 firebase 的支持。 所以问题甚至不在于 CORS 或 firebase 权限。问题是：前端和后端的错误请求和响应处理。起初看起来不错，但实际上并非如此。

我的传入请求没有被后端正确格式化和处理，这导致 firebase 函数 -> 日志部分出现以下错误：

API：未处理的拒绝 API：错误：参数“documentPath”的值不是有效的资源路径。

我的解决方法：

后端：

app.post("/setCarPlate", async (req, resp) => {
  const plate = req.body.data.platenr; // data handled properly (the fix)
  // some code ... ///
  await db
    .collection("Car-Plates")
    .doc(req.body.data.id)
    .set({
      Name: req.body.data.name,
      Surname: req.body.data.surname,
      PlateNr: req.body.data.platenr,
    })
    .then(...)
    .catch(...);
});

前端：

await api.post(
        "endpoint",
        {
          data: { // must wrap everything inside data
            id: this.state.id,
            name: this.state.name,
            surname: this.state.surname,
            platenr: this.state.platenr,
          },
        }
      )

【讨论】：