OpenLayers에서 CORS 활성화

OpenLayers에서 CORS ( Cross-Origin Resource Sharing) 를 활성화 할 수 있습니까? 그렇다면 어떻게?

OpenLayers에 웹 맵이 있으며 HTML 캔버스를 사용하여 PNG 이미지로 렌더링하고 있습니다. 내 스크립트는 훌륭하게 작동하지만 브라우저의 동일한 출처 정책 으로 인해 그려진 모든 맵 타일이 동일한 호스트 (예 :)에서 온 경우에만 캔버스를 이미지로 변환 할 수 있습니다 sub.domain.com.

지도의 로딩 속도를 높이기 위해 하위 도메인 배열에서 타일을 가져옵니다 : a.domain.com, b.domain.com등 타일은 여러 호스트에서 나옵니다.

CORS 를 사용 하여이 문제를 해결 하려고합니다 . Access-Control-Allow-OriginPHP로 제공하는 타일셋에 적절한 응답 헤더를 설정 했지만 아무런 영향을 미치지 않습니다. 나는 이것이 OriginWiki 페이지의 예제에 표시된 것처럼 요청에 헤더 가 없기 때문이라고 생각합니다 . 일부 OpenLayers 구성이 필요한 것 같습니다. 근데 뭐? 다른 사람이 성공적으로 수행 했습니까?

OpenLayers 소스를 통해 많은 정보를 얻은 후 발견했습니다! 문제는 누락 된 요청 헤더가 아니라 img레이어를 구성하는 요소, 특히 속성이 누락되었습니다 crossorigin. 참조 MDN을 그 속성의 세부 사항, 그리고에 대한 문서 OpenLayers와 함께 사용하는 방법에 대한 OpenStreetMap에의 레이어 ( 업데이트 : 여기에 조금 더 적절한 장소에 더 공식 문서이다).

OpenLayers에 img해당 요소가 있는지 확인하려면 레이어 옵션 crossOriginKeyword의 tileOptions값에서 옵션을 설정하십시오 .

tileOptions: {crossOriginKeyword: 'anonymous'}

다음과 같이 설정할 수 있습니다.

• "anonymous"- " 간단한 "CORS 요청을하십시오.
• "use-credentials"- 쿠키 및 HTTP 인증이 필요한 " 인증 된 "CORS 요청을 작성하십시오.
• null- crossorigin속성을 포함 하지 않으므로 CORS를 사용하지 마십시오. 대부분의 OpenLayers Layer 클래스의 기본값과 문제의 원인.

마지막으로, 완성도를 높이기 위해 WMS 레이어와 함께 사용하는 방법에 대한 예제가 있습니다. 다른 레이어 클래스로 작업하는 것도 비슷합니다.

var layer = new OpenLayers.Layer.WMS('My Layer', 'http://my.server.com', {
    format: 'image/png',
    layers: 'my:layer'
}, {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    transitionEffect: null
});

나는 이것이 다른 누군가를 돕기를 바랍니다!

참고 : 그것은 당신이 방법 / 속성을 사용하는 경우, 귀하의 타일 서버 것 같다 필요한 적절한 보낼 Access-Control-Allow-Origin헤더를. 해당 헤더를 보내지 않는 서버와 함께 사용하면 타일이 표시되지 않습니다. 이제 GeoServer를 함께 사용하려면 ...

직후

var layer =new OpenLayers.Layer.WMS(...

더하다

layer.tileOptions.crossOriginKeyword = null;