在 Firebase 托管中启用 CORS

Question

我的 CORS 和我的 Google 云功能有这个非常烦人的问题...

我得到的错误是：

来自来源“http://localhost:4200”的 [我的函数 URL] 对 XMLHttpRequest 的访问已被 CORS 策略阻止：请求 header飞行前响应中的 Access-Control-Allow-Headers 不允许字段 access-control-allow-origin。

我已经尝试使用以下代码在函数端处理它：

if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

然后在主 return 中添加：

headers = {
            'Access-Control-Allow-Origin': '*'
        }
....

return(json.dumps(data), 200, headers)

这行不通....

我也尝试过 firebase.json header 的方法，但也没有用...

甚至像这样尝试使用 angular 中的 HttpHeaders：

const headers = new HttpHeaders() 
      .set("Access-Control-Allow-Origin", "*") 
      .set("Access-Control-Allow-Methods", "POST, GET, OPTIONS") 
      .set('cache-control', 'no-cache')

也不行.....

然后我尝试使用代理（只是为了检查这是否是实际问题）添加了 proxy.config.json，当然在开发中它可以正常工作...

但问题是，我需要能够将 Angular 应用程序上传到 firebase 托管，那么我该如何修复后端的 CORS 错误？

Answer 1

消除 cors 错误的最简单方法之一是使用可调用函数。他们也有用户上下文。这真的很有用。

但是如果你想创建一个api。我建议使用 express 和 cors 包。这是我使用的代码：

import * as express from 'express';
import * as cors from 'cors';

const app = express();
// cors middleware handles all the cors related issues.
app.use(cors({ origin: '*' }));

// you can add your routes in your app.
app.use('/users', usersRoute);

export const api = functions.https.onRequest(app);

Answer 2

现在已经解决了，问题：

我在云功能（服务器端）和 webApp 端都有 CORS headers，这在某种程度上是不允许的，所以我只是从 webapp 端删除了代码，只把代码留在了云功能（服务器端）这解决了问题...

感谢大家！

在 Firebase 托管中启用 CORS

Enabling CORS in Firebase Hosting

firebase

firebase-hosting

google-cloud-functions

angular