JavaScript 엔진 표준 스펙에 있는 동일 출처 정책(Same-Origin Policy)이라는 보안규칙으로 인해 발생한다. (JavaScript 로 다른 웹페이지에 접근할 때는 같은 출처 - 프로토콜, 호스트명, 포트 - 의 페이지에만 접근 가능하다. 때문에 같은 서버에 있는 주소로만 ajax 요청을 할 수 있다.)
여러 도메인에 걸쳐서 구성되는 대규모 웹 어플리케이션이 늘어나고 REST API 등을 이용한 외부 공개 API의 호출이 많아지는 상황에서 이 보안정책은 조금 거추장스러워졌다.
그래서 CORS(Cross-Origin Resource Sharing)이라는 정책이 추가 되었다.
외부 요청을 허용할 경우 ajax요청이 가능해지는 방식이다.
해결방법
1. chrome 에 플러그인을 설치해서 간단하게 해결하자.
- 개발 시 테스트를 위해 쉽게 처리하기 위한 적당한 방법이다.
https://crhome.google.com/webstore 에서 Allow-Control-Allow-Origin 이라고 검색해서 나오는(제공자:vitvad) 플러그인을 설치하자. http response header 에 'Allow-Control-Allow-Origin: *' 를 자동으로 추가 해 주는 것으로 해결하는 방식이다.
2. JSONP 방식으로 호출하기
- 서버쪽 작업을 하지 못할 경우 jsonp로 처리하자.
css나 js같은 resource 파일들은 도메인이 달라도 정책에 영향을 받지 않고 로딩이 가능한 점을 이용한 방식으로 외부에서 읽어온 js 파일들을 json 으로 바꿔주는 방식이다. (GET방식만 가능하다.)
jsonp 에 대해서는 아래 포스팅을 참고 하자.
https://blog.naver.com/spdlqjdudghl/220644539375
3. Server-Side 에서 처리하기
- 실제 외부도메인에서의 요청을 처리하기 위한 API Server 를 만든다면 필요하다.
- 모든 요청의 응답에 아래 header 를 추가 한다.
. Access-Control-Allow-Origin: * (요청을 보내는 페이지의 출처(도메인)을 지정할 수 있다.)
. Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS (실제 요청하려는 HTTP Method를 설정할 수 있다. - 미설정 시 GET,POST만 가능하다. )
. Access-Control-Max-Age: 3600 (해당 시간동안은 Prelight 요청을 다시 하지 않는다.)
. Access-Control-Allow-Headers: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
https://spring.io/guides/gs/rest-service-cors/
