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代碼訪問響應。