在 Cloud Functions 中为 Firebase 启用 CORS

IT技术 javascript firebase google-cloud-platform cors google-cloud-functions
2021-01-11 04:24:58

我目前正在学习如何为 Firebase 使用新的 Cloud Functions,我遇到的问题是我无法访问我通过 AJAX 请求编写的函数。我收到“没有'访问控制-允许-来源'”错误。这是我编写的函数的示例:

exports.test = functions.https.onRequest((request, response) => {
  response.status(500).send({test: 'Testing functions'});
})

该函数位于此 url:https : //us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase 文档建议在函数中添加 CORS 中间件,我试过了,但对我不起作用:https : //firebase.google.com/docs/functions/http-events

我是这样做的:

var cors = require('cors');    

exports.test = functions.https.onRequest((request, response) => {
   cors(request, response, () => {
     response.status(500).send({test: 'Testing functions'});
   })
})

我究竟做错了什么?我将不胜感激。

更新:

道格史蒂文森的回答有帮助。添加({产地:真})固定的问题,我也不得不改变response.status(500)response.status(200)我完全错过了在第一。

6个回答

Firebase 团队提供了两个示例函数来演示 CORS 的使用:

第二个示例使用与您当前使用的不同的 cors 工作方式。

考虑像这样导入,如示例中所示:

const cors = require('cors')({origin: true});

你的函数的一般形式是这样的:

exports.fn = functions.https.onRequest((req, res) => {
    cors(req, res, () => {
        // your function body here - use the provided req and res from cors
    })
});
对于愿意向其后端添加 CORS 支持的任何人:请确保您了解后果以及如何正确配置它。"origin: true" 对于测试来说很酷,但它违背了整个目的:)
2021-03-11 04:24:58
谷歌云函数不允许通配符来源:cloud.google.com/functions/docs/writing/...
2021-03-15 04:24:58
看起来这是定义允许访问的域白名单的地方?并且设置origin: true允许任何域访问?( npmjs.com/package/cors ) @Doug Stevenson 您认为 firebase 可以编写有关客户端/服务器 https 功能所需基础知识的文档吗?样本回购很好,但我们错过了这个额外的要求。
2021-03-22 04:24:58
正如其他人所提到的,您能否更新您的答案以指出确实需要 cors 中间件?如果我们浏览您的答案,我们认为唯一需要的步骤是写const cors = require('cors')({origin: true});,但事实并非如此
2021-04-04 04:24:58
只是提醒大家仍然像 Doug 出色地提到的那样导入 cors,不要忘记像 Andrey 那样包装响应,否则它将无法工作!
2021-04-05 04:24:58

您可以像这样在云功能中设置 CORS

response.set('Access-Control-Allow-Origin', '*');

无需导入cors

@CoreyCole 我认为只有当您需要添加Authorization标题时。以上似乎工作正常。
2021-03-16 04:24:58
谷歌云函数不允许通配符来源:cloud.google.com/functions/docs/writing/...
2021-03-20 04:24:58
我将该行添加到我的云函数中,我的本地主机获取仍然被 CORS 策略阻止。
2021-03-23 04:24:58
这非常适合我的情况,一个对 Mailchimp API 进行 XHR 调用的云函数。
2021-03-29 04:24:58
这行代码放在哪里?云功能的哪一部分?
2021-04-04 04:24:58

对于任何试图在 Typescript 中执行此操作的人,代码如下:

import * as cors from 'cors';
const corsHandler = cors({origin: true});

export const exampleFunction= functions.https.onRequest(async (request, response) => {
       corsHandler(request, response, () => {});
       //Your code here
});
谷歌云函数不允许通配符来源:cloud.google.com/functions/docs/writing/...
2021-03-17 04:24:58
@YayoArellano,谢谢。您的回答对我有所帮助,但我做了一些小改动:corsHandler(request, response, () => { YOUR CODE HERE });
2021-03-23 04:24:58
解决方案将使您无法登录云函数(非常糟糕)和正确的 async/await 功能,您可能会冒着函数内容在长时间调用的回调中过早结束的风险。
2021-03-28 04:24:58
@OliverDixon 你有没有更好的解决方案,它没有在长时间调用期间可能冒着函数内容过早结束的风险?可能将它包装在一个只有在回调“完成”后才能解决的 Promise 中?
2021-04-09 04:24:58

一条额外的信息,只是为了那些在一段时间后使用谷歌搜索的人:如果您使用 firebase 托管,您还可以设置重写,以便例如像 (firebase_hosting_host)/api/myfunction 这样的 url 重定向到 ( firebase_cloudfunctions_host)/doStuff 函数。这样,由于重定向是透明的和服务器端的,您不必处理 cors。

您可以使用 firebase.json 中的重写部分进行设置:

"rewrites": [
        { "source": "/api/myFunction", "function": "doStuff" }
]
如果有人好奇,这里是文档的链接:firebase.google.com/docs/hosting/full-config#rewrite-functions
2021-03-12 04:24:58
imo,这是最好的答案,因为它解决了实际问题,而不会增加任何额外的安全问题。这样,云功能与其他功能从同一域提供服务,您甚至不需要任何 cors。
2021-03-28 04:24:58
这确实是一个很棒的功能,但它目前仅在函数位于默认区域 (us-central1) 中时才有效。由于延迟原因,我想将我的函数部署到 europe-west1 并遇到了这个问题:github.com/firebase/firebase-tools/issues/842
2021-03-29 04:24:58
使用 Firebase 托管?如果是,那么您的云功能必须在“us-central1”区域,2021 年 6 月仍然如此。
2021-04-08 04:24:58
重定向工作正常并使 URL 更清晰,但我还没有弄清楚如何传递 GET 参数。该函数(重写后)似乎是在没有参数的情况下调用的。
2021-04-10 04:24:58

没有 CORS 解决方案对我有用......直到现在!

不确定其他人是否遇到了与我相同的问题,但我从我发现的示例中以 5 种不同的方式设置了 CORS,但似乎没有任何效果。我用 Plunker 设置了一个最小的例子来看看它是否真的是一个错误,但这个例子运行得很好。我决定检查 firebase 函数日志(在 firebase 控制台中找到),看看是否可以告诉我任何信息。我在节点服务器的代码有一对夫妇的错误不CORS相关的,当我调试释放了我CORS错误消息我不知道为什么与 CORS 无关的代码错误会返回 CORS 错误响应,但它使我陷入了错误的兔子洞好几个小时......

tl; dr - 如果没有 CORS 解决方案工作,请检查您的 Firebase 功能日志并调试您拥有的任何错误

当您尝试在云功能中请求 Google reCAPTCHA 验证时,浏览器也会向您抛出 CORS 错误。当我检查 Firebase 控制台功能日志时,它显示access to external network resources not allowed if the billing account is not enabled. 启用计费帐户后,它可以完美运行。这也是与非 cors 相关的示例之一,但会引发 cors 错误。
2021-03-25 04:24:58
这让我发疯了。就我而言,它甚至不是代码错误!有人 Error: quota exceeded (Quota exceeded for quota group 'NetworkIngressNonbillable' and limit 'CLIENT_PROJECT-1d' of service 'cloudfunctions.googleapis.com 因此基本上是免费的配额超出和函数返回CORS错误
2021-03-26 04:24:58
就我而言,问题是我firebase use <project-name>在运行模拟器之前没有登录到正确的 Firebase 项目(在命令行上)。
2021-03-27 04:24:58
在这里发生了几次,从服务器和 cors 返回相同的错误:错误:内部基本上是错误。如果您运行错误的函数,例如输入错误的函数名称,也会发生此错误
2021-03-28 04:24:58