I using angular and nodejs for my application. Now I have pdf files stored in the gcp cloud storage bucket and by using getSignedUrl method in nodejs I am getting the url of the pdf file.

this is my nodejs code:

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 });
    }

Now in angular side I am trying to get this pdf file using the SignedUrl that I getting from nodejs:

angular-service.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)
      }
    )
  }

Now onFileDownload doing two job :

1. getting the signedUrl and open pdf file in the new tab so that we can download it (this is working fine).
2. But I posting this question because of this method this.homepageService.getDataOfUrl(this.signedUrl), when I pass the url to get the pdf data in some format so that I can use that data for further use like converting the pdf into image.

I am getting error from that:

Error:

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+kAtV57lVpNuIs6L1+kaUKJCHU65rglKLA==', 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

CodePudding user response：

Your bucket is denying access from external sources due to security reasons. In this case the http://localhost:4200 address. This is what CORS is designed to do.

Google has a guide on how to configure CORS for your bucket. You need to do this for your localhost address and any other websites that you plan on having retrieve this data.