Access-Control-Allow-OriginA는 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 이해를 참조하십시오 .

답변

Host DomainB.com
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json
Accept-Language en-us;
Accept-Encoding gzip, deflate
Keep-Alive 115
Origin http://DomainA.com 

Cache-Control private
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin DomainA.com
Content-Length 87
Proxy-Connection Keep-Alive
Connection Keep-Alive

OPTIONS DomainB.com/foo.aspx HTTP/1.1

HTTP/1.1 200 OK
Date: Wed, 01 Mar 2011 15:38:19 GMT
Access-Control-Allow-Origin: http://DomainA.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Type: application/json

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

open -a Google\ Chrome --args --disable-web-security --user-data-dir