node.js - 来自源的错误 : Access to XMLHttpRequest at https://storage. googleapis.com/url 已被 CORS 策略阻止。使用 gcp SignedURl 时有 Angular

Question

我在我的应用程序中使用 Angular 和 NodeJS。现在，我将 pdf 文件存储在 gcp 云存储桶中，并通过使用 Nodejs 中的 getSignedUrl 方法获取 pdf 文件的 url。

这是我的nodejs代码:

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 方面，我尝试使用从nodejs获取的SignedUrl来获取此pdf文件:

Angular 服务.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. 获取签名网址并在新选项卡中打开 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 有一个 guide了解如何为您的存储桶配置 CORS。您需要对本地主机地址和您计划检索此数据的任何其他网站执行此操作。