(네트워크) CORS 동작 방식

1. Preflight Request

실제 요청 보내기 전 OPTION 메소드로 사전 요청을 보내어 해당 출처에 접근 권한이 있는지 확인한다. 브라우저가 프리프라이트 요청을 보내고, 서버에서 응답 헤더 Allow-Control-Allow-Origin 값으로 요청을 보낸 출처가 돌아오게 되면 실제 요청을 보내게 된다.

 

Preflight Request
Origin: http://localhost:3000/

Response
Allow-Control-Allow-Origin: http://localhost:3000/

 

만약 출처에 대한 접근 권한이 없다면 응답 헤더에 Allow-Control-Allow-Origin가 들어 있지 않다. 이런 경우 브라우저는 CORS 에러를 띄우게 되고 실제 요청은 전달되지 않는다.

 

 

2. Simple Request

특정 조건이 만족되면 프리플라이트 요청은 생략하고 보내는 요청이다. 특정 조건은 아래와 같은데 일반적인 방법으로 웹 애플리케이션의 구조가 설계되는 프로젝트에서 이 조건 중에서 2번과 3번을 만족시키는 요청을 보내기는 드물다.

• 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안된다.
• 만약 Content-Type를 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용된다.

 

 

3. Credentialed Request

프론트측에서 요청 헤더에 인증 정보를 담아 보내는 요청이다.  출처가 다른 경우에는 별도의 설정을 통해 교차 출처 리소스 공유가 가능하다.

• 프론트에서는 요청 헤더에 withCredentials: true 를 넣어줘야 한다.
• 서버에서 응답 헤더에 Allow-Control-Allow-Origin: true 를 넣어줘야 한다. 
• 서버에서 와이드카드(*)를 설정하면 CORS 에러가 발생한다.

 

4. 서버에서 CORS 설정 방법

     - Node.js

   

    - Express : CORS 미들웨어 사용하여 설정

 

CORS를 해결할 수 있는 방법 다른 사람의 포스트 참고하기