没有“Access-Control-Allow-Origin”标头存在 GCP 存储桶 CDN答案

【问题标题】：No 'Access-Control-Allow-Origin' header is present GCP bucket CDN没有“Access-Control-Allow-Origin”标头存在 GCP 存储桶 CDN
【发布时间】：2021-02-16 02:55:37
【问题描述】：

我有一个具有下载 URL 的后端服务，比如说 example.com/download/{filkey}

每当调用此 URL 时，它都会创建 Google 存储桶 CDN 签名 URL。并且 example.com/download/{filkey} API 的响应将在其响应中包含 308（永久重定向）状态代码和 location = {Google signed CDN URL}。这意味着每当我在浏览器中点击 example.com/download/{filkey} 时，它将被重定向到 CDN URL，并且图像将显示在浏览器中并按预期工作。

但是，当我尝试在 JS 代码中调用 example.com/download/{filkey} 时会出现问题。它告诉我没有“Access-Control-Allow-Origin”标头存在

  fetch('http://example.com/download/abc_file', {
      method: 'GET',
      mode : 'cors', 
      headers: {
         'Authorization' : 'Bearer <Token>' // Token  to validate user at backend   
      },
    })
    .then(res => {
        console.log('Work Done');
        console.log(res);
        console.log('');
        console.log(res,res.body,res.headers.get('location'),'content.res')})
    .catch(err => {
        console.log('Error');
        console.log(err);
        console.log('');
        console.log(err,'content.res.err');});

我还更新了我的 Google 存储桶的 CORS 政策。但仍然没有运气这是我目前针对谷歌存储桶的 CORS 政策

[{"maxAgeSeconds": 3600, "method": ["GET", "OPTIONS", "HEAD", "PATCH", "PUT", "POST"], "origin": ["*"], "responseHeader": ["*"]}]

我在很长一段时间内都遇到了这个问题。通过在我的请求/响应中添加/删除标题，我尝试了很多不同的方法。当我在我的 JS 请求中添加 mode : no-cors 时，它可以工作。但是，我不能这样做，因为后端服务需要用户令牌。

提前致谢

【问题讨论】：

嗯。通常您使用 301 进行永久重定向。不过可能与这里的问题无关。

标签： javascript cors google-cdn google-cloud-cdn google-bucket

【解决方案1】：

您需要在来自后端服务的预检响应中包含一个 Access-Control-Allow-Origin 标头，而不仅仅是来自 Google Cloud Storage 的响应。

【讨论】：