크로스 원점 Azure에서 이미지에 액세스 할 때 오류가 발생했습니다.

Question

Photosphereviewer js를 사용하여 이미지를 표시하는 어플리케이션이 있습니다.

나는 node.js 앱을 사용하여 Azure 웹 사이트 (예 : http://example1.com)에 업로드했습니다. Photosphereviewer에서 사용 된 이미지는 다른 사이트의 이미지입니다 (예 : https://example2.com). 내가 http://example1.com에서 이미지를 액세스하고 때

지금, 내가 그것을 오류없이 정확하게 이미지를 표시 내부에 다른 사이트에서 이미지를 사용하려고 할 때

Access to Image at ' https://example2.com/images/1.JPG ' from origin ' http://example1.com ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://example1.com ' is therefore not allowed access.

아래와 같은 오류가 발생합니다.

app.use(cors()); 
app.use(function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); // We can access from anywhere 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'); 

    next(); 
}); 

: 나는 다음과 같이 노드 JS 응용 프로그램 내 app.js에 고르을 사용했다

var PSV = new PhotoSphereViewer({ 
        panorama: 'https://example2.com/images/1.JPG', 
        container: 'photosphere', 
        caption: 'Images', 
        cors_anonymous: true, 
        checkImageOrigin: false, 
        // loading_img: 'http://photo-sphere-viewer.js.org/assets/photosphere-logo.gif', 
        navbar: 'autorotate zoom download caption', // fullscreen 
        // default_fov: 70, 
        mousewheel: false, 
        size: { 
         height: 520//472 
        } 
       }); 

: 나는 다음과 같이 Photosphereviewer 내부의 이미지를 사용하는 경우

하지만, 그것은 고르 오류가 발생합니다

Azure 웹 사이트에서 Api 섹션의 CORS 옵션에 사이트 이름을 포함 시켰습니다.

아무 것도 작동하지 않았습니다. 같은 오류가 발생합니다. 이 문제를 극복하는 데 도움을주십시오. 미리 감사드립니다.

Answer 1

이미지를 제공하는 사이트 example2이 같은 명시 정적 집합이 보인다 :
app.use(express.static('public'));,
및 이미지 파일이 디렉토리 public/images 아래에 나열 할 수 있습니다.

위의 환경에서 문제가 재현되었습니다.

당신은 당신의 PhotoSphereViewer 클라이언트에 대한 이미지를 제공하기 위해 expressjs 서버에서 각각의 경로를 빌드 할 수 있습니다

app.get('/getimages/:filename',(req,res)=>{ 
    res.sendFile(__dirname+'/public/images/'+req.params.filename) 
}) 

그리고 forntend에서

:

var PSV = new PhotoSphereViewer({ 
       panorama: 'https://example2.azurewebsites.net/getimages/1.jpg', 
       container: 'photosphere', 
       caption: 'Images', 
       cors_anonymous: true, 
       checkImageOrigin: false, 
       // loading_img: 'http://photo-sphere-viewer.js.org/assets/photosphere-logo.gif', 
       navbar: 'autorotate zoom download caption', // fullscreen 
       // default_fov: 70, 
       mousewheel: false, 
       size: { 
        height: 520//472 
       } 
      });