在没有 cors 的情况下接收有关 firebase 功能的外部请求

Posted 2023-03-04

【中文标题】在没有 cors 的情况下接收有关 firebase 功能的外部请求

【英文标题】：Receive external requests on firebase functions without cors

【发布时间】：2018-07-16 15:35:10

【问题描述】：

大家好，我目前在使用 Firebase 应用的后端部分时遇到了一些问题。

我有一些在主 js 中导出的函数，这些函数从前端（在另一台服务器中）接收传入的 post 请求。问题是，在我的本地主机上的测试期间，它们运行良好，但现在在服务器中，我在前端收到了这个错误消息

[错误] 加载资源失败：预检响应不成功（receiveSolar，第 0 行） [错误] XMLHttpRequest 无法加载https://us-central1-myserverurl.cloudfunctions.net/receiveSolar。预检响应不成功

现在我在 index.js 中使用此代码导出函数：

exports.receiveSolar = functions.https.onRequest((request, response) => 
var object = request.body;
solar.otrafuncion(object.solar).then(objetoSolar =>
    response.send(objetoSolar);
  );


);

在阅读并做了一些研究之后，我确实在 firebase.json 中添加了这一行

  "hosting": 
"public": "public",
"headers": [ 
  "source" : "*",
  "headers" : [ 
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
 ]
]

公交车还是没有反应

那么我怎样才能让我的后端接收和响应前端

谢谢！

【参考方案1】：

首先，CORS 并不简单，所以不要担心你会遇到问题 :)

您的 请求 实际上包含两个单独的请求 - 您在客户端 JS 中编码的 GET/POST 和 CORS 预检 OPTIONS 请求 - 这个“预检”请求是在幕后进行的在浏览器向服务器发出 GET 请求之前。 OPTIONS 请求将包含一些 Access-Control-Request-* 标头，以及一个 Origin 请求标头。

对 OPTIONS 请求的响应需要包含一些其他的Access-Control-*response 标头（除了Access-Control-Allow-Origin）。如果您不返回 OPTIONS 响应的其他标头，则浏览器实际上不会运行 GET 请求。

所以...

除了Access-Control-Allow-Origin之外，您还需要更新您的 firebase.json 以返回其他 CORS 标头用于预检 OPTIONS 请求。

具体来说，至少，当请求方法为OPTIONS时，需要返回以下额外的响应头：

Access-Control-Allow-Headers: value of Access-Control-Request-Headers request header Access-Control-Allow-Methods: value of Access-Control-Request-Method request header

因此，如果 OPTIONS 请求到达后端时带有以下请求标头：

Origin: https://www.yourpage.com

Access-Control-Request-Method: GET

Access-Control-Request-Headers: header1, header2, header3

那么您对该 OPTIONS 请求的响应必须包含以下响应标头：

Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: http://www.yourpage.com

Access-Control-Allow-Methods: GET

Access-Control-Allow-Headers: header1, header2, header3

对于实际的 GET 请求，您只需要包含 Access-Control-Allow-Origin: * 响应标头（就像您当前所做的那样）。