Question

Hello Evereyone我目前在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" : "*"
} ]
}]
}

巴士仍然没有得到回应

那么如何让我的后端接收并响应前端

谢谢！

Answer 1

首先，CORS并不简单，所以不要担心你遇到问题：）

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

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

因此...

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

具体而言，至少，当请求方法为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: *响应标头（正如您当前所做的那样）。

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

1 个答案: