Search code examples
javascriptcorsphoto360-panorama

VR view 360 photo sphere images, possible CORS issue

I am trying to create a page to show 360 photos I took with my Nexus 6 default camera app in panoramic mode.

Using the Google documentation, I created a local website "video360.dev"

<div id="vrview"></div>

remote hosted libraries seemed to get me further

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

I tried, locally hosted image, image on my domain and an image hosting solution:

<script>
        window.addEventListener('load', onVrViewLoad)
        function onVrViewLoad() {
          var vrView = new VRView.Player('#vrview', {

            //Taken with nexus6 default camera app in panoramic mode
            image: 'http://www.darrencousins.com/images/1.jpg',
            // image: '1.jpg',
            // image: 'https://image.ibb.co/jCpmGQ/1.jpg',

            // video: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/304756/rabbit360_HD_1280x640_low.mp4',

            is_stereo: true,
            width:'100%',
            height:'800px'
          });
        }
    </script>

To make sure I wasn't going mad, I "borrowed" a working video line from an existing codepen, it worked fine, it's just something about my image or hosting setup.

I made a codepen to try and remove the whole "local hosting" issue as I believe I have a CORS issue, but unsure how to solve it.

issue seen when locally hosting

Any ideas how to fix this?

Solution

  • Your code’s sending a request for https://image.ibb.co/jCpmGQ/1.jpg using XHR and your browser is getting the response—but the response lacks the Access-Control-Allow-Origin response header, so your browser isn’t allowing your frontend JavaScript code to actually access the response. That’s what browsers do for cross-origin requests when there’s no Access-Control-Allow-Origin response header in the response. That’s how CORS works.

    Therefore probably your only option is to send the request through a CORS proxy instead.

    So what you can try is, where you’re specifying the URL https://image.ibb.co/jCpmGQ/1.jpg in your code now, just replace that with this URL:

    https://cors-anywhere.herokuapp.com/https://image.ibb.co/jCpmGQ/1.jpg

    That will cause the request to be sent to https://cors-anywhere.herokuapp.com instead, which is a CORS proxy. That proxy will then send the request for https://image.ibb.co/jCpmGQ/1.jpg and when it gets the response, the proxy will take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

    That response with the Access-Control-Allow-Origin response header is what your browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.