교차 출처 리소스 공유 CORS

Posted on | In
HTTP 요청에서 발생하는 CORS 개념, 다루는 법

CORS 란?

CORS(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

ex) htts://domain-a.com 의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 htts://domain-b.com/data.json 을 요청하는 경우.

이러한 경우때문에 프론트엔드에서 백엔드 서버의 API를 요청하는 경우에 해당 주소를 따로 열어두어야 한다. 그리고 오픈 API가 아니라면 나머지 요청에 대해서는 닫혀있어야 한다.

개발서버에서의 CORS 적용 방법

개발 서버에서는 proxy라는 개념을 이용해서 백엔드 서버에 직접요청이 아닌 현재 개발서버의 주소로 요청을 하여 간편하게 이용할 수가 있다. 그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환한다.

CRA를 통해 만든 리액트에서는 package.json에서 proxy 값만 따로 설정해주면 이용을 할 수 있다.

1
2
//ex
"proxy": "http://localhost:3000"

물론 이렇게 사용하다가 배포를 하는 환경에서는 실제 요청 위치 상태를 다시 이용해야한다.

서버측에서 특정 주소에서만 허용하는 방법

클라이언트측에서 요청을 할 때 해당 HTTP 헤더를 확인하면 Access-Control-Allow-Origin 헤더가 존재한다. 해당 헤더를 통해 접근 도메인을 설정할 수 있다.

1
2
3
4
5
6
7
8
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

만약 이런식으로 도메인을 *로 설정하면 모든 도메인에서 접근을 허용하는 것이 된다. 여기서 특정 도메인, 예를 들어 ex.sample 만 허용하게 한다면

1
2
3
4
5
6
7
8
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://ex.sample
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

이런식으로 설정을 하면 된다.

출처

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#HTTP_%EC%9D%91%EB%8B%B5_%ED%97%A4%EB%8D%94 > https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html