VR보기 360 Photo Sphere 이미지, CORS 문제 가능

Nexus 6 기본 카메라 앱을 파노라마 모드로 찍은 360 장의 사진을 보여주는 페이지를 만들려고합니다. VR보기 360 Photo Sphere 이미지, CORS 문제 가능

구글 문서를 사용

, 나는

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

더 저를 얻을 것 같았다 로컬 웹 사이트 "video360.dev"를 생성 내 도메인 및 이미지 호스팅 솔루션 :

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

내가 잘못하지 않았는지 확인하려면 미친 듯이, 나는 기존의 코덱에서 작동하는 비디오 라인을 "빌려"잘 작동했다. 이것은 이미지 나 호스팅 설정에 관한 것일 뿐이다.

나는 CORS 문제가 있다고 생각하여 codepen 전체 "로컬 호스팅"문제를 제거했지만이를 해결하는 방법은 확실하지 않습니다.

어떤 아이디어가이 문제를 어떻게 해결 하는가?

출처

2017-04-16 sygad1

코드가 XHR을 사용하여 https://image.ibb.co/jCpmGQ/1.jpg에 대한 요청을 보내고 브라우저가 응답을 받고 있지만 응답에 응답 헤더가 없으므로 브라우저가 프론트 엔드 JavaScript 코드가 실제로 응답에 액세스하지 못하게합니다. 응답에 Access-Control-Allow-Origin 응답 헤더가 없을 때 브라우저가 원산지 요청에 대해 수행하는 작업입니다. 그것이 CORS가 작동하는 방식입니다.

따라서 유일한 옵션은 대신 CORS 프록시를 통해 요청을 보내는 것입니다.

그래서 당신은, 당신은 지금 당신의 코드에서 URL https://image.ibb.co/jCpmGQ/1.jpg을 지정하는 경우, 그냥이 URL과 그 대체됩니다 시도 할 수 있습니다 :

요청이 대신 https://cors-anywhere.herokuapp.com로 전송하게됩니다

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

, CORS 프록시입니다. 그러면 해당 프록시가 https://image.ibb.co/jCpmGQ/1.jpg에 대한 요청을 보내고 응답을 받으면 프록시가 응답을 받아서 Access-Control-Allow-Origin 응답 헤더를 추가 한 다음이를 요청한 프론트 엔드 코드에 응답으로 전달합니다.

응답 헤더가 인 응답 헤더가 브라우저에서 보는 메시지이므로 브라우저에서 표시되는 오류 메시지가 사라지고 브라우저에서 프론트 엔드 JavaScript 코드가 응답에 액세스 할 수 있습니다.

출처

2017-04-16 14:08:08 sideshowbarker

매력처럼 작동합니다. 덕분입니다. 또한 일시적으로 CORS를 사용하기위한 크롬 확장 프로그램을 설치하여 문제를 해결했지만 이상적인 해결책은 아니지만 최소한 의심스러운 점은 확인했습니다. – sygad1

로컬에서이 작업을 수행하는 방법에 대해 알고 싶습니다. 내 서버로 MAMP Pro를 사용합니다. – sygad1

https://www.npmjs.com/package/cors-anywhere는 heroku 서버에서 사용하는 것으로 누군가가 자신의 호스트를 원할 경우 유용 할 수 있습니다 – user2312688

VR보기 360 Photo Sphere 이미지, CORS 문제 가능

답변

관련 문제