Agfdhyk

I'm trying to get a pdf file displayed on my page. The pdf file is located as a blob on azure. I'm getting the link to the blob itself from the server, that way i can grab the file directly from the storage instead of passing it through the server.

I set up a shared access signature(SAS key) because the container is protected.

Since I'm using angular 5 I need to sanitize my url which i'm doing.

 this.http.get(baseUrl + 'api/download/fileuri?sheetId=' + this.sheetId, { responseType: 'text' }).subscribe(result => {

        this.url = result.toString();            

        this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);

        console.log(this.sanitizedUrl);

    }, error => console.error(error));

I'm then putting it inside a object, yet i either get nothing but a white page or i get the following error.

<object [data]="sanitizedUrl" type="application/pdf" style="width:100%; height:100vh"></object>

I set up the following in azure:

The weirdest part is: I can grab that file but just inputting that link, it just starts downloading it. But the moment i try to access it from the object, it throws that error. So the link is correct and it works. It's just whenever i try to access it from within the page..

I recommend you to download Microsoft Azure Storage Explorer. Inside of it you can set CORS policy for specific resource. I hope it will solve your problem.