VR 查看 360 度全景照片,可能存在 CORS 问题
VR view 360 photo sphere images, possible CORS issue
我正在尝试创建一个页面来显示我在全景模式下使用 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>
为了确保我不会发疯,我 "borrowed" 来自现有代码笔的工作视频线,它工作正常,它只是关于我的图像或托管设置的问题。
我做了一个 codepen 来尝试删除整个 "local hosting" 问题,因为我认为我有一个 CORS 问题,但不确定如何解决它。
有什么解决办法吗?
您的代码正在使用 XHR 发送对 https://image.ibb.co/jCpmGQ/1.jpg 的请求,并且您的浏览器正在收到响应 — 但该响应缺少 Access-Control-Allow-Origin
响应 header,因此您的浏览器不允许您的前端 JavaScript 实际访问响应的代码。当响应中没有 Access-Control-Allow-Origin
响应 header 时,这就是浏览器对 cross-origin 请求所做的。这就是 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访问响应的代码。
我正在尝试创建一个页面来显示我在全景模式下使用 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>
为了确保我不会发疯,我 "borrowed" 来自现有代码笔的工作视频线,它工作正常,它只是关于我的图像或托管设置的问题。
我做了一个 codepen 来尝试删除整个 "local hosting" 问题,因为我认为我有一个 CORS 问题,但不确定如何解决它。
有什么解决办法吗?
您的代码正在使用 XHR 发送对 https://image.ibb.co/jCpmGQ/1.jpg 的请求,并且您的浏览器正在收到响应 — 但该响应缺少 Access-Control-Allow-Origin
响应 header,因此您的浏览器不允许您的前端 JavaScript 实际访问响应的代码。当响应中没有 Access-Control-Allow-Origin
响应 header 时,这就是浏览器对 cross-origin 请求所做的。这就是 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访问响应的代码。