VR视图360照片球体图像，可能是CORS问题

Question

我正在尝试创建一个页面，以全景模式显示我使用Nexus 6默认相机应用拍摄的360张照片。

使用Google文档，我创建了一个本地网站＆＃34; video360.dev＆＃34;

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

远程托管库似乎让我更进一步

<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>

我尝试过本地托管的图片，我的域上的图片和图片托管解决方案：

<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>

为了确保我不生气，我借＃34;来自现有codepen的工作视频线，它运行良好，它只是关于我的图像或托管设置。

我做了codepen尝试删除整个＆＃34;本地托管＆＃34;因为我认为我有一个CORS问题，但不确定如何解决它。

任何想法如何解决这个问题？

Answer 1

您的代码正在使用XHR发送https://image.ibb.co/jCpmGQ/1.jpg请求，而您的浏览器正在获取响应 - 但响应缺少Access-Control-Allow-Origin响应标头，因此您的浏览器不允许实际的前端JavaScript代码访问响应。当响应中没有Access-Control-Allow-Origin响应头时，这就是浏览器对跨源请求所做的事情。这就是CORS的工作原理。

因此，您唯一的选择可能是通过CORS代理发送请求。

所以您可以尝试的是，您现在在代码中指定网址https://image.ibb.co/jCpmGQ/1.jpg，只需将其替换为此网址：

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

这将导致请求被发送到https://cors-anywhere.herokuapp.com，这是一个CORS代理。该代理将发送https://image.ibb.co/jCpmGQ/1.jpg的请求，当它获得响应时，代理将接收它并向其添加Access-Control-Allow-Origin响应头，然后将其作为响应传递回请求的前端代码

带有Access-Control-Allow-Origin响应标头的响应是您的浏览器所看到的，因此浏览器显示的错误消息现在消失了，浏览器允许您的前端JavaScript代码访问响应。