VR视图360度全景照片球体图像CORS问题

Question

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

使用谷歌文档，我创建了一个本地网站“video360.dev”

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

为了确保我没有去我疯狂地从现有的codepen中“借用”了一段工作视频，它工作得很好，它只是关于我的图像或主机设置。

我做了codepen尝试删除整个“本地托管”问题，因为我相信我有一个CORS问题，但不确定如何解决它。

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

Answer 1

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

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

那么，你可以尝试的，在你指定的URL 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代码访问响应。