Firebase 函数 CORS 错误访问控制允许来源

Question

我有一个简单的 firebase 函数，它返回一个 hello world

exports.myFunc = functions
    .runWith({
        maxInstances: 1,
        memory: "128MB"
    })
    .https.onRequest(async (request, response) => {
        response.set("Content-Type", "text/plain");
        response.status(200).send('Hello world!');
    }

我通过带有这些标头的 POST 请求调用它：

>  {
>    host: 'localhost:5001',
>    connection: 'keep-alive',
>    pragma: 'no-cache',
>    'cache-control': 'no-cache',
>    accept: '*/*',
>    'access-control-request-method': 'POST',
>    'access-control-request-headers': 'authorization,content-type',
>    origin: 'http://localhost:8080',
>    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36',
>    'sec-fetch-mode': 'cors',
>    'sec-fetch-site': 'same-site',
>    'sec-fetch-dest': 'empty',
>    referer: 'http://localhost:8080/',
>    'accept-encoding': 'gzip, deflate, br',
>    'accept-language': 'en-US,en;q=0.9'
>  }

问题是我在尝试调用它时遇到了 CORS 错误，因为我是从托管在 firebase 上的 vue 应用程序调用它。好的，有道理，所以我阅读了一些关于 CORS 的文档，它抛出的第一个错误是：

from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

好的，我添加所需的标题：

exports.myFunc = functions
    .runWith({
        maxInstances: 1,
        memory: "128MB"
    })
    .https.onRequest(async (request, response) => {
        if (request.method === 'OPTIONS') {
            response.set('Access-Control-Allow-Origin', '*');
            response.status(204).send('');
        } else {
            // return hello world 
        }
    }

我知道允许所有 (*) 是一种不好的安全做法，并且违背了 CORS 的某些目的，但这是为了测试。通过上述设置，我得到另一个 CORS 错误：

from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

好的，我再添加一些标题：

exports.myFunc = functions
    .runWith({
        maxInstances: 1,
        memory: "128MB"
    })
    .https.onRequest(async (request, response) => {
        if (request.method === 'OPTIONS') {
            response.set('Access-Control-Allow-Headers', "authorization,content-type");
            response.set('Access-Control-Allow-Origin', '*');
            response.status(204).send('');
        } else {
            // return hello world 
        }
    }

但是添加该标题从一开始就给我同样的错误！ ：

from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经尝试了所有随机标头组合、身份验证标头、凭据标头、启用所有标头方法等。没有组合似乎可以工作我做错了什么？我在网上找到的所有答案都告诉我添加

'Access-Control-Allow-Origin', '*' 

是解决方案，但它不起作用？一个解决方案会导致另一个错误，依此类推。

这是我要返回的返回标头：

>  [Object: null prototype] {
>    'x-powered-by': 'Express',
>    'access-control-allow-headers': 'authorization,content-type',
>    'access-control-allow-origin': '*'
>  }

Answer 1

所以我找出了原因，并且出了很多问题，希望这可以帮助将来遇到与我相同错误的人。

1. 在处理 CORS 时，您需要确保在初始 CORS 预检请求和之后的实际请求的响应中发送所需的标头。在我的情况下，我正在为选项预检请求返回正确的标头，而不是随后的实际请求。

2. 如果您使用 chrome 进行调试，您可以将开发者控制台设置为同时显示预检和实际请求。 我的 chrome 版本结合了这两个请求，这让我一直相信这是仍然导致问题的预检。您可以按照以下答案更改您的 chrome 设置：Chrome not showing OPTIONS requests in Network tab。

3. 最后，修复非常简单，只需在实际请求中再次添加所需的 cors 标头即可修复所有问题。代码如下：

    .https.onRequest(async (request, response) => {
   
        if (request.method === 'OPTIONS') {
            response.set('Access-Control-Allow-Headers', "authorization,content-type");
            response.set('Access-Control-Allow-Origin', '*');
            response.status(204).send('');
        } 
        else {
            // return hello world 
            response.set('Access-Control-Allow-Origin', '*');
        }
   

请注意，响应现在还将返回访问控制允许来源标头，无论它是预检选项请求还是实际请求。