Firebase可调用函数+ CORS

Question

我正在尝试从我的应用中调用可调用的Cloud Function，但是我遇到了CORS问题。

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

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功能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

对于来到这里搜索 firebase 可调用函数 cors 错误的其他人，这是我的清单：

1. 确保已部署该功能。
2. 确保函数名称正确。我recalculatY在应该打电话的时候打电话recalculateY。由于某种原因出现 cors 错误。
3. 确保函数代码本身没有抛出错误。使用模拟器来帮助。这并没有引发 cors 错误仍然有助于了解。
4. 确保您的区域匹配 - 我正在使用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...vsfirebase.app.function...

Answer 2

对于任何在 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 3

我的某些 Firebase 函数遇到了这个问题，但其他函数没有。我最终通过这样做来修复它：

1. 在 index.js 中注释掉函数
2. 运行 Firebase 部署
3. 在提示符下输入 y 以删除函数
4. 等待 5 到 10 分钟
5. 删除函数周围的注释并再次运行 firebase deploy

没有对函数本身进行任何更改，它现在可以在没有任何 CORS 问题的情况下运行。

Answer 4

对于那些在现有 GCloud 项目上启用 Firebase 后遇到此错误的人来说，存在一些复杂性，不会像它只是一个 Firebase 应用程序那样自动处理。

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

以下是修复步骤：

1. 进入云功能选项卡
2. 选择您的云功能（复选框）
3. 单击右侧“权限”选项卡下的“添加成员”
4. 输入“所有用户”
5. 在“新成员”下选择角色为“Cloud Functions -> “Cloud Functions Invoker”
6. 节省
7. 只需将其粘贴到浏览器中即可测试您的云功能

干杯

Answer 5

可能很多人会在模拟器和 cors 消息中遇到这个问题。

我在谷歌上看到的任何讨论中都没有看到我的案例被讨论，我确实看到了很多“无法重现”，也许我的案例会有所启发：

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

当您通过 npm start 运行 React 应用程序时 - 而函数通过 firebase emulators:start 运行时，您将看到 Cors 错误。

因此，在测试云函数调用时，您应该执行 npm run build，而不是使用 npm start，然后从模拟器访问应用程序...

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

一些注释 -

• 您的函数还应该通过模拟器工作

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

Answer 6

对我来说，我必须允许访问allUsers该功能。

1. 转到 Google Cloud Platform Console 云功能。Detailed usage stats您可以在 Firebase 控制台的“功能”选项卡中单击

2. 转到权限选项卡

3. 单击添加

4. 添加适当的权限

Answer 7

我刚刚在 web sdk 9.12 中使用 v2 云函数时遇到错误。

我的解决方案是不使用函数名称，而是使用v2 可调用云函数的完整 url。

import { getFunctions, httpsCallableFromURL } from 'firebase/functions';

const functions = getFunctions();
const addMessage = httpsCallableFromURL(
  functions,
  // the URL of the function
  "https://addmessage-xyz1234-uc.a.run.app/addMessage"
);

addMessage({ text: messageText })
  .then((result) => {
    // Read result of the Cloud Function.
    const data = result.data;
    const sanitizedMessage = data.text;
  });

摘自文档的片段： https ://firebase.google.com/docs/functions/beta/callable#web-version-9_2

Answer 8

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

catch((err) => {
  throw new functions.https.HttpsError('unknown', err.message, err)
})