on
CORS
CORS (Cross Origin Resource Sharing) 란
서로 다른 도메인간에 자원을 공유하는 것을 의미하며 기본적으로 차단되어있습니다.
Origin이란 출처를 의미하며 Protocol + Host + Port 를 합친 것을 말합니다.
Origin이 같으면 CORS 에러는 발생하지 않습니다.
개발자 도구를 키고 location.origin을 치면 해당 사이트의 origin을 확인할 수 있습니다. https(443), http(80) 포트는 생략가능합니다.
예를 들어 아래 개발 환경은 포트가 다르기때문에, Origin이 다른 것으로 판단되어 자원 요청시 CORS 에러가 발생합니다.
http://localhost:8080
http://localhost:8000
CORS 에러 해결 방법
서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있습니다.
Access-Control-Allow-Origin
헤더에 작성된 출처만 브라우저가 리소스를 접근할 수 있도록 허용합니다.
아래와 같이 응답 헤더가 작성되었다면 https://fure0.github.io 페이지에서 브라우저는 서버 응답으로 온 리소스를 접근할 수 있습니다.
Access-Control-Allow-Origin: https://fure0.github.io
Access-Control-Allow-Method
브라우저에서 보내는 요청 헤더에 포함된 Access-Control-Request-Method 헤더에 대한 응답 결과입니다. 리소스 접근을 허용하는 HTTP 메서드를 지정해 주는 헤더입니다.
사용 방법은 아래 코드와 같습니다. Access-Control-Allow-Methods 헤더에 GET, PUT, POST, DELETE 등의 HTTP 메서드를 ,로 구분하여 넘겨줍니다.
Access-Control-Allow-Methods: GET, PUT
Access-Control-Expose-Headers
서버에서 응답 헤더에 Access-Control-Expose-Headers를 추가해 줘야 브라우저의 자바스크립트에서 헤더에 접근할 수 있습니다.
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
credentials: 쿠키 등의 인증 정보를 전달할 수 있습니다.
기타해결 방법
- JSONP : JSONP(JSON with Padding)는 script 요소가 외부 출처 리소스를 가져올 수 있는 특징을 사용하는 방법입니다.
- 프록시 서버 : 프론트엔드와 백엔드 사이에 프록시 서버를 두는 방법으로 CORS를 해결할 수도 있습니다.