Javascript VR view 360照片球体图像，可能存在CORS问题

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

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

远程托管库似乎让我走得更远

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

window.addEventListener（'load'，onVrViewLoad）
函数onVrViewLoad（）{
var vrView=new vrView.Player（“#vrView”{
//在全景模式下使用nexus6默认摄像头应用程序拍摄
图像：'http://www.darrencousins.com/images/1.jpg',
//图片：“1.jpg”，
//图像：'https://image.ibb.co/jCpmGQ/1.jpg',
//视频：'https://s3-us-west-2.amazonaws.com/s.cdpn.io/304756/rabbit360_HD_1280x640_low.mp4',
这是真的吗，
宽度：'100%'，
高度：'800px'
});
}

为了确保我没有发疯，我从一个现有的代码笔“借用”了一条工作视频线，它工作得很好，只是关于我的图像或主机设置

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

---

有没有办法解决这个问题？

您的代码正在发送使用XHR的请求，并且您的浏览器正在收到响应，但是响应缺少

访问控制允许源代码

响应头，因此您的浏览器不允许前端JavaScript代码实际访问响应。当响应中没有

Access Control Allow origin

response头时，浏览器就是这样处理跨源请求的。这就是CORS的工作原理

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

因此，您可以尝试指定URL

https://image.ibb.co/jCpmGQ/1.jpg

在您的代码中，只需将其替换为以下URL：

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

response头的响应是您的浏览器看到的，因此浏览器显示的错误消息现在消失了，浏览器允许您的前端JavaScript代码访问响应。

非常有效，谢谢。我还通过安装chrome扩展来启用CORS暂时解决了这个问题，这不是一个理想的解决方案，但至少它证实了我的怀疑。你知道如何在本地实现吗？我使用MAMP Pro，因为我的服务器是heroku服务器所使用的，如果有人想托管他们的own@user2312688谢谢，是的，我在答案的*如何使用CORS代理来解决“无访问控制允许源标题”问题部分中提供了更多的细节，谢谢你的答案。。。直到昨天它还在工作，从今天开始就不工作了！！有什么合乎逻辑的原因吗？

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