Pannellum: Cannot show panorama for file from AWS S3 Bucket public URL

[Roman-PAM]

Tried this https://cdn.pannellum.org/2.2/pannellum.htm?panorama=https://s3-ap-southeast-2.amazonaws.com/pam-roman-voloboev/test/2a36125e6ce898edd6e2a24b26ba6c3ec63d9d01685f427d15c3f94efdcea543ddb59b232ff5b460dd792d87b0ab41994b21b5db32f92a70ef8ea540a9895b13

Got "File cannot be accessed". But it can be opened with URL https://s3-ap-southeast-2.amazonaws.com/pam-roman-voloboev/test/2a36125e6ce898edd6e2a24b26ba6c3ec63d9d01685f427d15c3f94efdcea543ddb59b232ff5b460dd792d87b0ab41994b21b5db32f92a70ef8ea540a9895b13

[Roman-PAM]

@mpetroff Could you give an advice to fix this ASAP, please.

[mpetroff]

https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

[Roman-PAM]

@mpetroff thank you!

[Roman-PAM]

@mpetroff even if CORS is set up for all GET requests, it is still broken
Try this link

Any ideas?
Thank you.

[mpetroff]

CORS is definitely not set up. From my browser's developers' console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-ap-southeast-2.amazonaws.com/pam-csda/test/b0cb62d361924ab929b305ac7b0b8aafb121032d814c3a8fbbcdc22c62fda0c7bb8c94b92d682f7596b273a95347cac7dd68d219b186ff90bbb0e8d9e515c5c3. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

[Roman-PAM]

@mpetroff My mistake, thank you.

[tatianafrank]

We're having a similar issues but our cors is setup on S3 to allow the origin. We only get this error: Failed to load <>.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin <> is therefore not allowed access. for images that are utilizing pannellum. Is there some way to pass the crossorigin='anonymous' parameter to pannellum.viewer? Or something along those lines?

[mpetroff]

If you're getting that error, I don't think you have CORS set up properly. Equirectangular images are loaded using an XMLHTTPRequest, so the CORS settings attribute is not applicable (it's only for HTML elements); XHRs support CORS implicitly.

[faridskyman]

i have the same issue, i have setup S3 correctly for CORS, based on the link
still it cant download with this error

Access to XMLHttpRequest at 'https://s3-ap-southeast-1.amazonaws.com/images360/360img/184_360.jpg' from origin 'https://beta.eplatform.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

however in chrome if i install a CORS plugin, then it works
the plugin makes it work (even without CORS policy on s3)

im really stuck

[mpetroff]

I'm fairly certain that, despite what you think, you don't have CORS configured correctly. I'd check the headers for the requested file myself to be sure, but your link does not work.

[yangtheng2359]

There seems to be an issue in chrome which happens in a situation like this:

1) You have an img tag with src='foobar.jpg' on your website, image loads.
2) Chrome caches the response which obviously has no CORS headers because no 'Origin' request header was set in the above request.
3) You try to load the same image in pannellum (http GET request to the same file). Despite having CORS configured correctly on S3, chrome immediately returns the cached response (which has no CORS headers) and hence throws an error that the response has no CORS headers. (If you open up developer tools and go to network you would see that the response is 'from disk cache')

The solution I have found for this is to add a query parameter to the url in the img src attribute. So in the above example, the src would become something like 'foobar.jpg?x-request=html'. This way, we trick the browser into thinking that the html request url is different from the http request url.

Hopefully this works for you guys!

More detailed explanation/alternative solutions:
https://serverfault.com/questions/856904/chrome-s3-cloudfront-no-access-control-allow-origin-header-on-initial-xhr-req

[butterfly-coder]

Thanks so much!!! @yangtheng2359
I've faced same issue and solved it. Your answer was very helpful.
Thanks again.