CORS 에러?? 그게 뭔데.

CORS는 무엇일까?

CROSS ORIGIN RESOURCE SHARING

🔖 특정 도메인 및 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스를 가능케 하는 보안 메커니즘

• 서버나 클라이언트가 정해진 헤더를 통해 서로 요청 및 응답에 반응할지 결정하는 방식
• 동일 출처 정책(same-origin policy) 때문에 등장

동일 출처 정책은 뭐지?

🔖 동일한 출처의 리소스에만 접근하도록 엑세스를 제한하는 것

• 출처는 "프로토콜", "호스트", "포트" 등을 의미

🔖 만약 출처가 다른데도 엑세스를 허용한다면?

• 중요한 개인정보나 로그인 정보 등이 오고가는 사이트에서 토큰을 발급받고 다른 사이트에 접속하면 이러한 토큰이 다른 사이트에도 옮겨갈 위험성이 있다.
• 이러한 위험을 방지하기 위해 같은 출처일 때만 접근 가능하도록 구현했다.

그럼 CORS가 왜 필요하며, 어떻게 동작할까(심화)

🔖 예전처럼 동일한 도메인에서만 리소스를 받는게 아닌, 클라이언트가 각기 다른 도메인에서 제공하는 다양한 API를 사용하는 일이 많아졌기 때문

🔖 브라우저는 다른 출처로 요청을 보낼 때 다음과 같은 절차를 거친다.

• 1. simple request
  • GET, HEAD, POST 요청 중 한 가지 방식을 사용한다.
  • POST 방식인 경우, conetnt-type이 한정된다.(application/x-www-form-unlencoded, multipart/form-data, text/plain)
• simple request 과정
  1. 요청을 보낸다.
  2. 브라우저는 Host 같은 헤더 추가 외에 교차 출처 요청에 대해 origin request header를 자동 추가한다.
  3. 서버에서 orh를 확인한다. 허용 시, access-control-allow-origin 요청 헤더값을 설정한다.
  4. 응답받은 브라우저가 헤더값이 탭의 출처와 일치하는지 확인한다. 일치하거나, 와일드 카드 연산자가 포함되면 통과!
• preflighted request
  1 ajax 요청을 보낸다.
  2. 서버는 허용된 메서드 및 헤더를 지정해 응답한다.
  3. 헤더와 메서드가 통과되면 브라우저가 기존 CORS 요청을 보낸다.
  4. 응답이 올바른 출처이므로 검사가 통과된다.

CORS 에러를 해결해보자!

🔖 프론트와 백 둘 다 문제가 발생하기 때문에 더 어렵게 느껴진다..

🏷️ 어차피 둘 다에서 해결해야 하지만 프론트 측에서 해결 가능한 간단한 방법이 있다!

• 회피성 방법
  • 웹 브라우저 실행 옵션이나 플러그인을 통해 동일 출처 정책 회피
  • jsonp 방식으로 json 데이터 가져오기
• 다른 사람이 만든 프록시 서버 이용
  • 요청 URL 앞에 프록시 서버 URL를 붙여 요청
• http-proxy-middleware 사용