时间戳

首页 > 解决方案 > 被 CORS 政策阻止的 Firebase 函数 api

javascript - 被 CORS 政策阻止的 Firebase 函数 api

问题描述

我有一些从 React 应用程序调用的 firebase 云函数。本地主机到本地主机工作正常，但是当我尝试联系云功能的部署版本（来自我的本地主机和我部署的 React 应用程序）时，我收到一个 CORS 错误：

Access to XMLHttpRequest at 'https://us-xxxxxxxxxxxxx.cloudfunctions.net/api/login' from origin 'http://localhost:3000' 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.

这是功能index.js：

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

const {
  signup,
  login,
  loginAdmin,
  getUserData,
} = require("./handlers/users");

...
app.post("/login", login);
....
exports.api = functions.https.onRequest(app);

这是我尝试添加到登录功能的内容：

exports.login = async (req, res) => {
  res.set('Access-Control-Allow-Origin', "*"); // added this line
  // actual function is irrelevant

但它没有用，所以我也尝试了这个：

exports.login = async (req, res) => {
  console.log('outside')
  return await cors(req, res, async () => {
    console.log('inside')
    // function code....

但在这种情况下，函数挂起，从控制台我可以看到它打印outside但不是inside.

前端代码是一样的，所以我怀疑问题在那里......

我怎样才能解决这个问题？

编辑：

感谢答案，我在以下代码中添加了这行代码index.js：

const functions = require("firebase-functions");
const cors = require('cors');
const app = require("express")();
app.use(cors({ origin: true }));
app.options('/login', cors()) // <- this one

const {
  signup,
  login,
  loginAdmin,
  getUserData,
} = require("./handlers/users");

...
app.post("/login", login);
....
exports.api = functions.https.onRequest(app);

仍然没有运气，我再次部署但我有同样的错误。

标签： javascriptnode.jsfirebase

解决方案

错误消息说：

预检请求

正如MDN 所说，这是一个 OPTIONS 请求。

您只是绑定设置Access-Control-Allow-Origin为 POST 请求的处理程序的代码。

您正在使用的模块的文档cors解释了如何为飞行前请求设置代码。

一个例子是：

app.options('/products/:id', cors()) // enable pre-flight request for DELETE request

推荐阅读