# 다를 경우(크로스 도메인) 브라우저 개발 콘솔창에서 다음 에러메시지를 확인 할 수 있다.
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "
# Firefox 로 보면
# CORS(cross origin resource sharing), same origin(동일 출처) 원칙에 따르면 현재 웹페이지의 리소스(스크립트, 이미지, 동영상등)의 출처가 현재 도메인과 다르면 안되지만 이를 가능하게 하는 메커니즘이다.
"교차 원본 요청 차단: 동일 출처 정책으로 인해 http://10.10.10.10/ysoftman 에 있는 원격 자원을 읽을 수 없습니다. 자원을 같은 도메인으로 이동시키거나 CORS를 활성화하여 해결할 수 있습니다."
# 예를 들어 로컬 디스크에서 개발중인 ajax내용이 있는 .html파일 크롬으로 실행시키면 발생할 수 있다.
# 내 PC 도메인은 file:///C:어쩌구저쩌구... 인데 실제 ajax 로 요청하는 호스트 도메인은 http://10.10.10.10 등으로 서로 다르기 때문이다.
# 서버단에서 해결방법
# 서버쪽에서 응답 헤더에 Access-Control-Allow-Origin 값을 모두 허용하도록 설정
# 서버 언어에 맞게 응답 헤더에 설정하도록 한다.
header("Access-Control-Allow-Origin", "*");
header("Access-Control-Allow-Origin: *");
# 클라(브러우저)에서 해결방법
# 크롬의 경우 현재 열려진 모든 크롬을 닫고 아래 옵션을 주어 실행
chrome --disable-web-security
# 아래 크롬 주소창로 크롬 실행시 어떤 옵션으로 실행되었는지 파악할 수 있다.
chrome://version
# IE의 경우
# 요청 후 나타나는 "차단된 콘텐츠 허용" -> 예 선택
# 외부 URL 요청이라면 웹브라우저가 preflight 요청을 수행한다.
# preflight 는 method=options 로 설정하고 해당 URL 로 미리 요청을 날려 요청이 허용(allow) 되는지 파악하는 과정이다.
# preflight 요청시에 다음과 같이 헤더 설정을 한다.
# POST 메소드를 사용할것이고 X-PINGOTHER 헤더가 포함될것이라고 알린다.
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER
# preflight (method=options) 요청후 서버 응답으로 서버에서 사용가능한 리소스, 메소드, 헤더등의 정보를 알려준다.
# POST 메소드를 사용할것이고 X-PINGOTHER 헤더가 포함될것이라고 알린다.
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER
# preflight (method=options) 요청후 서버 응답으로 서버에서 사용가능한 리소스, 메소드, 헤더등의 정보를 알려준다.
# http://foo.example 도메인에서만 허용된다.
# POST, GET, OPTIONS 메소드 허용된다.
# 86400 초 동안 preflight 응답을 캐싱
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
# preflight 응답이 다음과 같다면 모든 도메인에서 접근(요청)이 가능하다.
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
# preflight 응답이 다음과 같다면 모든 도메인에서 접근(요청)이 가능하다.
Access-Control-Allow-Origin: *
# 참고
comments:
댓글 쓰기