Access-Control-Allow-Origin
A는 CORS (교차 리소스 공유) 헤더 .
사이트 A가 사이트 B에서 콘텐츠를 가져 오려고하면 사이트 B는 Access-Control-Allow-Origin
응답 헤더를 보내서 브라우저에이 페이지의 콘텐츠를 특정 출처에서 액세스 할 수 있음을 알릴 수 있습니다. ( 원점 은 도메인과 구성표 및 포트 번호를 더한 것 입니다.) 기본적으로 사이트 B의 페이지는 다른 원본에 액세스 할 수 없습니다 . Access-Control-Allow-Origin
헤더를 사용하면 특정 요청 원점으로 교차 출처 액세스를위한 문이 열립니다.
사이트 B가 사이트 A에 액세스 할 수 있도록하려는 각 리소스 / 페이지에 대해 사이트 B는 응답 헤더와 함께 해당 페이지를 제공해야합니다.
Access-Control-Allow-Origin: http://siteA.com
최신 브라우저는 도메인 간 요청을 완전히 차단하지 않습니다. 사이트 A가 사이트 B에서 페이지를 요청하면 브라우저는 실제로 네트워크 수준 에서 요청 된 페이지 를 가져오고 응답 헤더가 사이트 A를 허용 된 요청자 도메인으로 나열하는지 확인합니다. 사이트 B가 사이트 A가이 페이지에 액세스 할 수 있다고 표시하지 않으면 브라우저는 XMLHttpRequest
의 error
이벤트를 트리거 하고 요청하는 JavaScript 코드에 대한 응답 데이터를 거부합니다.
단순하지 않은 요청
네트워크 수준에서 발생하는 상황은 위에서 설명한 것보다 약간 더 복잡 할 수 있습니다 . 요청이 "단순하지 않은"요청 인 경우, 브라우저는 먼저 데이터가없는 "프리 플라이트"OPTIONS 요청을 전송하여 서버가 요청을 수락하는지 확인합니다. 다음 중 하나 또는 둘 모두의 경우 요청이 단순하지 않습니다.
- GET 또는 POST 이외의 HTTP 동사 사용 (예 : PUT, DELETE)
- 단순하지 않은 요청 헤더 사용 유일한 간단한 요청 헤더는 다음과 같습니다.
Accept
Accept-Language
Content-Language
Content-Type
(이 값은 단순한 경우이다 application/x-www-form-urlencoded
, multipart/form-data
또는 text/plain
)
서버 Access-Control-Allow-Headers
가 단순 Access-Control-Allow-Methods
하지 않은 동사 및 / 또는 단순하지 않은 헤더와 일치하는 적절한 응답 헤더 ( 단순하지 않은 헤더, 단순 하지 않은 동사의 경우) 를 사용하여 OPTIONS 프리 플라이트에 응답 하면 브라우저는 실제 요청을 보냅니다.
사이트 A가 /somePage
단순 Content-Type
값이 아닌에 대한 PUT 요청을 보내려고한다고 가정하면 application/json
브라우저는 먼저 프리 플라이트 요청을 보냅니다.
OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type
그 주 Access-Control-Request-Method
와 Access-Control-Request-Headers
브라우저에 의해 자동으로 추가됩니다; 추가하지 않아도됩니다. 이 옵션 프리 플라이트는 성공적인 응답 헤더를 얻습니다.
Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
실제 요청을 전송할 때 (사전 비행 완료 후), 동작은 간단한 요청이 처리되는 방식과 동일합니다. 다시 말해, 프리 플라이트가 성공한 단순하지 않은 요청은 단순 요청과 동일하게 처리됩니다 (즉, Access-Control-Allow-Origin
실제 응답을 위해 서버가 여전히 다시 전송해야 함 ).
브라우저는 실제 요청을 보냅니다.
PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json
{ "myRequestContent": "JSON is so great" }
그리고 서버는 Access-Control-Allow-Origin
간단한 요청과 마찬가지로을 다시 보냅니다 .
Access-Control-Allow-Origin: http://siteA.com
단순하지 않은 요청에 대한 자세한 내용은 CORS 를 통한 XMLHttpRequest 이해를 참조하십시오 .
http://siteA/MyCode.js
.