[네트워크] CORS

CORS (Cross-Origin Resource Sharing)

• 다른 출처 간의 리소스 공유
• CORS는 브라우저의 구현 스펙에 포함되는 정책
• 출처
  • 서버를 찾아가기 위해 가장 기본적인 것들을 합쳐 놓은 것
  • 프로토콜 + 호스트 + 포트
  • http://uchupura.tistory.com:80
• CORS 동작 절차
  • 브라우저에서 요청을 보낼 때 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 전달
  • 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin 필드에 "이 리소스를 접근하는 것이 허용된 출처" 정보를 담아 전달
  • 브라우저에서는 요청 시 보냈던 Origin 필드와 응답으로 받은 Access-Control-Allow-Origin 필드를 비교하여 이 응답이 유효한지 판단

 

CORS 해결 방법

• 서버에서 Access-Control-Allow-Orign 헤더에 알맞은 값을 설정
• 리버스 프록시 활용
  • webpack dev server 또는 http-proxy-middleware를 활용