CORS

종종 CORS에 대한 Error를 마주치는데 그냥 지나쳤던 CORS에 대해서 알아보자

우선 Origin에 대해서

• Origin이란 프로토콜+주소+포트번호의 쌍을 말한다 (http는 80, https는 443의 기본포트를 가진다)
• 대부분의 웹브라우저는 Same Origin Policy(SOP)라는 보안정책을 준수한다. 이는 내가 접속한 사이트에서 다른 Origin에 요청을 기본적으로 제한하는것이고 이로인해 해커의 공격을 방어한다.
• 다만 <img>, <script>, <iframe>, <link>,등과 같은 태그는 외부자원을 임베딩하도록 지원해준다. (단 데이터 읽기는 불가!)
• 이때 외부 Origin의 데이터를 읽고싶은경우 CORS표준을 지켜 내 사이트 응답에 설정을 해주면 받아 읽을 수 있게된다

Cross Origin Resource Sharing

Preflight Request

이는 예비요청과 본요청으로 나뉜다.
예비요청으로 다른 도메인의 리소스에 요청이 가능한지 판단하고, 요청이 가능하다면 그때 본요청을 보낸다.
OPTIONS메소드와 함께 2개의 요청헤더가 전송된다

• Preflight Request

Access-Control-Request-Method : POST
Access-Control-Request-Headers : X-PINGOTHER, Content-Type

• Preflight Response

Access-Control-Allow-Origin: http://foo.example	# 서버측 허가출처
Access-Control-Allow-Methods: POST, GET, OPTIONS # 허가 메서드
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type	# 서버측 허가헤더
Access-Control-Max-Age: 86400 # Prefilght 응답 캐시기간

Simple Request

• 메서드는 GET POST HEAD 중 하나
• 헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용
• Content-Type 헤더는 다음의 값들만 허용

CORS 해결방법

1. Access-Control-Allow-Origin 응답 헤더 세팅

• 서버측 응답에서 접근 권한을 주는 헤더를 추가
• 백엔드개발자가 접근가능한 도메인을 추가해줘야함

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
  res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
});

2. CORS모듈사용

3. webpack-dev-server proxy 기능

• 리액트 개발환경에서 서버쪽 코드를 추가하지않고 프록시를 설정하면 서버에서 해당 요청을 받을 수 있다

• package.json에서 proxy값을 설정해준다

여기서 proxy란?
"대리인"이라는 뜻으로 유저의 요청을 받아서 전달해주는 역할
여기서 유저<->naver 간의 Origin이 다르므로 proxy<->naver간의 Origin을 일치시켜 naver로부터 CORS가 가능하다