Intermittent issue saying image cannot be accessed

[fareed945]

I'm facing few intermittent issues while loading image. However, when I click on the above link, i'm able to see and download the image successfully. It happens at random occasions. The only difference is that i'm using the pannellum source code from my assets instead of npm install. Please help

[mpetroff]

It's probably a CORS issue. Your browser's developer tools should tell you.

[fareed945]

This is the error stack

TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'. at _global.. [as readAsBinaryString] (zone.js:924:1) at Fa (pannellum.js:66:95) at fa.onloadend [as __zone_symbol__ON_PROPERTYloadend] (pannellum.js:58:86) at XMLHttpRequest.wrapFn (zone.js:766:1) at _ZoneDelegate.invokeTask (zone.js:406:1) at Object.onInvokeTask (core.mjs:25579:1) at _ZoneDelegate.invokeTask (zone.js:405:1) at Zone.runTask (zone.js:178:1) at ZoneTask.invokeTask [as invoke] (zone.js:487:1) at invokeTask (zone.js:1661:1)

[mpetroff]

The stack trace is not what you need. A CORS error should show up as a warning in the console, and would definitely show up in the network tab.

[fareed945]

So, you mean to say that this might be an issue with the handshake between browser and the cloud storage ?

[mpetroff]

The problem is likely that you're accessing an image on a different domain than where you're hosting the viewer, and your CORS headers are incorrect. It's a HTTP header issue.

[fareed945]

@mpetroff Thanks for the info, any reason that you can think of as to why it occurs intermittently and not always?

[mpetroff]

It could happen due to caching. For example, if you first load the image by directly visiting the URL, the request won't include CORS headers. If you then try to load the image from Pannellum, your browser will just use the cached copy, which doesn't include CORS headers, so the panorama will fail to load.

There could be other reasons related to your server configuration, but that's the reason I'm most familiar with.

The way to avoid this is to host your images on the same domain as the page that you display your panoramas on if you're using Pannellum's API or to host pannellum.htm on the same domain as your images if you're using the standalone <iframe> embed version.

[fareed945]

@mpetroff Thanks for your reply, let me sum it up: I have an angular app hosted on a domain let's say xyz.com, I have my pannellum.js, .htm and the .css files in my assets of the angular app. My images are hosted on azure blob, which allow CORS with Access-Control-Allow-Origin: *, since this issue is occurring intermittently and nor does it show any warning in the console/network tab related to CORS .

Do you think it could be an issue with loading these files from the assets ?, should they be hosted somewhere else ?

[mpetroff]

nor does it show any warning in the console/network tab related to CORS

The headers for the request in the network tab either will or will not include CORS headers. It will definitely tell you something.

I still suspect your issue may be caching related.

[fareed945]

Hey @mpetroff thanks for your time, I managed to fix the issue in my code. When I was debugging the onLoad function I figured out that it was being called multiple times, as I had set autoload : true to my scenes and was calling the load scene as well. So there were two almost simultaneous requests being called, causing issues.