javascript - VR 查看 360 度全景照片，可能存在 CORS 问题

Question

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

使用 Google 文档，我创建了一个本地网站“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尝试消除整个“本地托管”问题，因为我相信我有 CORS 问题，但不确定如何解决它。

有什么想法可以解决这个问题吗？

Answer 1

您的代码正在发送 https://image.ibb.co/jCpmGQ/1.jpg 的请求使用 XHR 并且您的浏览器正在获取响应，但响应缺少 Access-Control-Allow-Origin 响应 header ，因此您的浏览器不允许前端 JavaScript 代码实际访问该响应。这就是当响应中没有 Access-Control-Allow-Origin 响应 header 时浏览器对跨源请求所做的操作。这就是 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 响应 header ，然后将其作为响应传递回您的请求前端代码。

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