Question

我试图从我的应用程序调用可调用的云功能，但我正面临CORS问题。

我无法启用Cors，因为我无法访问onCall函数上的请求和响应。这是我的功能：

exports.UserInvitation = functions.https.onCall((data, context) => {
  const email = data.email


  return new Promise((resolve, reject) => {
    admin.auth().createUser({
      email: email,
      emailVerified: false,
      password: password
    }).then(resolve).catch((err) => {
      console.error(err.code)
      reject(new functions.https.HttpsError(err.code, err.message))
    })
  })
})

这就是我所说的：

functions.httpsCallable('UserInvitation')({ email: this.input.value }).then((data) => {
      console.log('Sent invitation:', data)
})

Firebase-functions package.json：

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "bluebird": "^3.5.1",
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "private": true
}

WEB SDK Firebase版本：4.13.1

Answer 1

适用于查看此职位2020年1月的任何人。

在Reddit（https://www.reddit.com/r/reactjs/comments/fsw405/firebase_cloud_functions_cors_policy_error/）上找到了这个答案

事实证明，在2020年1月15日，Google更改了所有新功能都不再具有Cloud Functions Invoker的安全设置。这意味着所有新创建的功能都将被禁止访问，从而导致CORS策略块。

这里不是很明显的解决方法，您可以通过以下方法来解决：

https://cloud.google.com/functions/docs/securing/managing-access-iam#allowing_unauthenticated_function_invocation

Answer 2

对于到达这里搜索firebase可调用函数的更正错误的任何人，这是我的清单：

确保功能已部署。
确保函数名称正确。我应该在recalculatY时打电话给recalculateY。由于某种原因出现了cors错误。
确保功能代码本身未引发错误。 Use the emulator to help.这并没有引发cors错误，但仍然有助于您了解。
确保您的区域匹配-我正在使用europe-west2。我必须同时在该区域部署该函数，并使用该区域进行调用。有一阵子，我假设如果函数名称正确，客户端将推断出正确的区域。事实并非如此。

将可调用函数部署到特定区域：

// This is the file in which you define your callable function.
const functions = require('firebase-functions');
...
exports.yourFunc = functions.region('europe-west2').https.onCall(async (data, context) => {
    ...
})

从客户端（在本例中为vuejs Web应用程序）的特定区域调用函数：

// In my case, this is a vuex store file, but it is safe to assume this is plain old javascript
import firebase from 'firebase/app'
import 'firebase/functions'
...
firebase.app().functions('europe-west2').httpsCallable('yourFunc')

注意：firebase.app().function...与firebase.app.function...

Answer 3

我的问题不在于CORS，而在于我的错误处理程序。我没有拒绝承诺，而是直接在catch处理程序中使用了type_id。

throw

Answer 4

对于那些在现有GCloud项目上启用Firebase之后遇到此错误的人，有些复杂性无法自动解决，就像仅仅是Firebase应用程序一样。

我遇到了这个特定问题，因为我希望我的firebase函数可以公开访问，但是如果您使用的是Google的Cloud Functions，则必须专门配置它。

以下是要修复的步骤：

转到云功能标签
选择您的云功能（复选框）
点击右侧“权限”标签下的“添加成员”
输入“ allUsers”
在“新成员”下，选择“角色”作为“云功能->“云功能调用者”
保存
只需将其粘贴到浏览器中即可测试您的云功能

欢呼

Answer 5

如果以上方法均无济于事：就我而言，原因是我没有正确设置我的区域。使用第三方库时，尤其可能发生这种情况。

Answer 6

可能会有很多人使用模拟器和cors消息来解决此问题。

我在Google进行的任何讨论中都没有讨论过我的案子，我确实看到许多“无法复制”，也许我的案子会有所帮助：

就我而言，问题是我没有从Firebase模拟器运行托管。

当您通过npm start运行react应用时-当功能通过firebase emulators：start运行时，您会看到Cors错误。

因此，在测试云函数调用时，应该使用npm start而不是npm start npm运行构建，然后从仿真器访问应用程序...

搜索类似的内容： “托管：本地服务器：http://localhost:5000”

一些笔记-

您的功能还应通过以下方式与仿真器配合使用

const functions = firebaseApp.functions('europe-west3');// lets assume thats your region functions.useFunctionsEmulator('http://localhost:5000');

Answer 7

传递给HttpsError的状态代码不能为test/code。它必须是此处列出的标准代码之一： https://firebase.google.com/docs/reference/functions/functions.https.HttpsError

Answer 8

我的某些Firebase功能遇到了此问题，而其他功能则没有。我最终通过以下方法解决了这个问题：

在index.js中注释该功能
正在运行Firebase部署
在提示时输入y删除功能
等待5至10分钟
删除功能周围的注释并再次运行firebase部署

该函数本身没有任何更改，现在可以运行而没有任何CORS问题。

Answer 9

错误应符合https://firebase.google.com/docs/reference/functions/functions.https.HttpsError
我在更改函数名称后部署了可调用函数，并且可以正常工作。

Answer 10

我以前将我的函数部署为HTTP函数（https.onRequest），然后切换到可调用函数（https.onCall）。 Firebase无法识别此更改。

我解决了该问题，方法是删除该功能并在不使用该功能的情况下进行部署，然后将该功能放回原处并再次部署。

Answer 11

对我有用的是删除我的云函数中的区域参数，然后重新部署。

从functions.region("europe-west2").https.onCall(async (data) => {..

到functions.https.onCall(async (data) => {..

Answer 12

当我尝试创建用于登录 firebase 用户的自定义令牌时，我遇到了同样的错误。我在下面附上了我的代码。但是，我后来发现问题是由于尝试使用相同的参数多次调用该函数来创建多个令牌。

export const getCustomToken = functions.https.onCall((params: any) => {
 return admin.auth().createCustomToken(params).then((token) => {
   return token;
  }).catch((error) => {
    console.log(error);
    return null;
  });
 });

解决方案
我通过在尝试登录之前首先检查用户是否已注销来解决该问题。因此，我建议您首先检查您尝试创建的用户是否已经存在。我知道这有点晚了，但我希望这对其他人有所帮助。

this.fireAuth.currentUser.then((signedInAlready) => {
  if (signedInAlready) {
    return this.fireAuth.signOut().then(() => getCustomToken());
  } else {
    return getCustomToken();
  }
});

在您的 firebase 函数中，您可以按如下方式检查现有用户：

admin.auth().getUserByEmail('your-email').then((userExists) => {
if (userExists) {
  // return user
} else {
  // create a new user
}});

Answer 13

我遇到了同样的问题。我的解决方案是在 https://console.cloud.google.com 中打开我的 Firebase 项目并导航到云功能页面。

在其权限页面查找您的函数名称，并将新角色“Cloud Functions Invoker”添加到“allUsers”成员。

Answer 14

基本上，我做了关于 onCall 云函数的 CORS 错误的页面色调和答案中提到的所有内容，从更改区域或手动添加调用权限到更明显的权限，对我来说没有任何效果。刚刚将 onCall 转到 OnRequest 并且它起作用了。

Firebase可调用函数+ CORS

14 个答案: