错误：CORS 策略已阻止从源访问位于 https://storage.googleapis.com/url 的 XMLHttpRequest。 在 angular 使用 gcp SignedURl 时

Question

我为我的应用程序使用 angular 和 nodejs。 现在我在 gcp cloud storage bucket中存储了 pdf 个文件，通过在 nodejs 中使用getSignedUrl方法，我得到了 pdf 文件的 url。

这是我的节点代码：

try {
      let file = await bucket.file(fileName);
      let url = await file.getSignedUrl({
        action: "read",
        expires: dd + "-" + mm + "-" + yyyy
      });
      res.send({
        message: "found url",
        data: url,
      });
    } catch (e) {
      console.log(e);
      res.status(400).send({ message: e });
    }

现在在 angular 端，我试图使用从SignedUrl获取的 SignedUrl 获取这个 pdf 文件：

角度服务.ts

  getDataOfUrl(url) {
    let headers = new HttpHeaders();
    headers.set('Accept', 'application/pdf');
    this.http.get(url, { headers: headers, responseType: 'blob' as 'json' }).
    subscribe(data => {
      console.log(data)
    }, (err) => {
      console.log(err)
    })
  }

angular.component.ts

  onFileDownload(filename) {
    let body = {
      fileId: filename+".pdf"
    }
    this.homepageService.downloadFile(body).subscribe(
      (data) =>{
        this.signedUrl = data.data[0];
        this.homepageService.getDataOfUrl(this.signedUrl)
        window.open(data.data[0])
      }, (error) => {
        console.log(error)
      }
    )
  }

现在onFileDownload做了两个工作：

1. 获取 signedUrl 并在新选项卡中打开 pdf 文件，以便我们可以下载它（这工作正常）。
2. 但是我发布这个问题是因为这个方法this.homepageService.getDataOfUrl(this.signedUrl) ，当我通过 url 以某种格式获取 pdf 数据时，我可以使用该数据进一步使用，例如将 pdf 转换为图像。

我从中得到错误：

错误：

Access to XMLHttpRequest at 'https://storage.googleapis.com/url' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'https://storage.googleapis.com/humana-author-pubsu…Et3Da%2BkAtV57lVpNuIs6L1%2BkaUKJCHU65rglKLA%3D%3D', ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}


GET https://storage.googleapis.com/url net::ERR_FAILED 200

Answer 1

出于安全原因，您的存储桶拒绝来自外部来源的访问。 在本例中为http://localhost:4200地址。 这就是CORS的设计目的。

Google 提供了有关如何为您的存储桶配置 CORS 的指南。 您需要为您的本地主机地址和您计划检索此数据的任何其他网站执行此操作。