CORS 대처법과 우회법

CORS란?!

• Cross-Origin Resource Sharing, 교차 출처 자원 공유 정책
• 자바스크립트는 기본적으로, Same-Origin Policy(동일 출처 정책)의 보안 규칙이 존재한다.

동일 출처 정책이란?!

• 자바스크립트로 다른 웹페이지에 접근할 때는
  같은 출처(same origin)의 페이지에만 접근이 가능하다.
• 웹페이지의 스크립트는 그 페이지와 같은 서버의 주소로만 ajax 요청을 할 수 있다.
  추가, Same-Origin Policy에 대해..

• 해당 규칙에 따라, 다른 출처에서 가져온 자원과 상호작용하는 것을 제한한다.
• 하지만, CORS로 다른 서버의 주소로 통신하여 자원을 로딩할 수 있다.
  따라서, 이를 위한 HTTP 헤더 기반 메커니즘이라고 생각하면 된다.

---

CORS 에러를 대처하는 방법과 우회하는 방법

• 외부 서버의 주소로 ajax 요청을 할 수 없을 때, 우리는 CORS 에러에 직면한다고 한다.
• 이를 해결하기 위한 방식으로, 다양한 시점에서의 다양한 방법이 존재한다.

---

개발 or 테스트 단계에서의 방법

1. 웹 브라우저의 실행 옵션의 방식으로 Same-Origin Policy(동일 출처 정책) 회피
   • 실행 옵션 중, 외부 요청을 허용하는 옵션을 사용함으로써, 회피한다.
   • 이 방식은 Same-Origin Policy(동일 출처 정책)에서,
     외부 도메인 요청 가능 여부를 확인하는 것을 무시하며 동작한다.

     크롬 브라우저는, --disable-web-security 옵션을 추가

2. 플러그인의 방식으로 Same-Origin Policy(동일 출처 정책) 회피
   • 외부 요청을 가능케 하는 플러그인을 설치하는 방식.
   • 서버가 응답으로 특정 header를 추가하면, 요청이 가능해진다.
     • 특정 header: Access-Control-Allow-Origin: *

       크롬 브라우저는, 확장 프로그램을 이용

     • Allow CORS: Access-Control-Allow-Origin

---

서버 측에서, 수정 요청이 불가능한 경우

• JSONP 방식을 사용한다.
  • 외부 서버에서 읽은 js(자바스크립트) 파일 -> json으로 바꾸는 방법
  • 일종의 편법으로, GET 방식의 HTTP 요청만이 가능하다.

---

서버 측에서, 수정 요청이 가능한 경우

• 서버에서 관리 가능하면, 아예 CORS요청을 핸들링하도록 한다.
• 또는, 서버로 날아온 Preflight 요청을 확인하여 가능하도록 한다.

Preflight 요청이란?!

• Preflight 요청은 예비 요청이라는 뜻.
• 먼저 서버와 잘 통신되는지 확인하기 위한 요청을 보내는 것을 의미.
• 확인하여 본 요청을 보내는 것을 프로세스로 한다.

---

✨ 출처

blog, javascript ajax 크로스도메인 요청-CORS
blog, CORS-💯-정리-해결-방법-👏

---