자바스크립트 코딩을 하다 알게된 오류에 대해 서술.

1. A 사이트에서 B 사이트 팝업창을 띄움

2. B 사이트 팝업창 버튼을 클릭시 A사이트의 브라우저 탭에 다른 A사이트 페이지를 띄움.

B 사이트 소스에 자바 스크립트 opener.window.open을 이용하여 2번 기능을 구현할려고 하였다.

하지만 CORS 문제로 인해 opener 접근 자체가 되지 않는다.

Request headers의 Origin과  요청한 웹 서버의 Access-Control-Allow-Origin에 허용 되지 않아 발생!

POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다.

Cross-origin resource sharing

Cross-origin resource sharing(CORS)는 어느 한 웹 페이지에서 다른 웹 도메인의 웹 사이트 페이지에 자원 접근 요청을 막는다.

특히 Ajax 요청은 same-origin security policy 정책에 의해 기본적으로 접근이 불가능하다.

CORS는 아래의 로직으로 실행된다.

*출처 : Wikipiedia 문서 - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

CORS와 관련된 Headers

Request headers

- Origin

- Access-Control-Request-Method

- Access-Control-Request-Headers

Response headers

- Access-Control-Allow-Origin

- Access-Control-Allow-Credentials

- Access-Control-Expose-Headers

- Access-Control-Max-Age

- Access-Contorl-Allow-Method

- Access-Control-Allow-Headers

CORS의 해결법

접근할 다른 도메인의 웹 서버의 헤더에 아래 값을 추가하면 된다.

Access-Control-Allow-Origin : 접근을 허용할 웹사이트 도메인

Ex) 네이버에서의 접근을 허용할려면 Access-Control-Allow-Origin : http://www.naver.com

참고 사이트 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS