Firebase 函数中的 CORS

Posted

技术标签:

【中文标题】Firebase 函数中的 CORS【英文标题】:CORS in Firebase functions 【发布时间】:2020-02-12 17:27:39 【问题描述】:

问题是函数被CORS阻塞:

“http://localhost:8100”已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。

我还在 Firebase 中主持了一个项目。但它也不起作用。被相同的错误阻止。

我的服务器代码:

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

exports.myfunction = functions.https.onRequest( (req: any, response: any) =>  

  return cors(req, response, () => 

    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    response.set('Access-Control-Allow-Methods', 'POST');
    response.set('Access-Control-Allow-Headers', 'Content-Type');
    response.set('Access-Control-Max-Age', '3600');  
    response.set('Access-Control-Allow-Origin', '*');
    response.set('Access-Control-Allow-Credentials', 'true'); 

    response.status(200).send('hello world');
  );

我的客户代码:

let config = 
      headers: 
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*',
      


this.http.post<any>(URL, data: 'hello',config).subscribe(res => 
        console.log(res);        
);

请帮忙。我的头好痛。

【问题讨论】:

CORS 必须在服务器而不是客户端上接受 这是服务器代码 您的客户是否有必要的标头? 我现在在问题中包含客户端代码 您似乎在进行大量手动响应标头操作,但这就是 cors 中间件旨在为您做的事情。请看这里的例子~firebase.google.com/docs/functions/…和这里~firebase.google.com/docs/functions/… 【参考方案1】:

您需要将托管服务器的 URL 硬编码到客户端。

因此,在 Angular 中,您将拥有连接到后端 api 端点的服务。在这里,'api url' const 必须是托管方或托管服务器的 URL。

【讨论】:

@JhonDoe 对托管服务器的 URL 进行硬编码是否有效?【参考方案2】:

您需要在函数中设置 Access-Control-Allow-* 标头以匹配您要接受的请求。

这里是一个示例,使用 Node.js 编写的 CORS 函数,来自 GCP documentation,用于 CORS 请求:

exports.corsEnabledFunction = (req, res) => 
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

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

  if (req.method === 'OPTIONS') 
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
   else 
    res.send('Hello World!');
  
;

【讨论】:

问题依旧

以上是关于Firebase 函数中的 CORS的主要内容,如果未能解决你的问题,请参考以下文章

如何从firebase函数中的firebase存储中获取图像的尺寸?

firebase.storage() 不是 JavaScript 中的函数

从android中的firebase函数接收json数据给出空值

Firebase 函数中的 CORS

在 React-Native 中的非异步函数中调用异步函数 - Firebase

如何在 React Native 中的 firebase 服务函数成功后运行回调函数