CORS 란

1. SOP(Same Origin Policy) ?

 - 프로토콜, 호스트, 포트 가 모두 같아야 다른 출처의 리소스 요청이 가능

 

2. JSONP(Json With Padding)

 - SOP 을 우회할 수 있는 방법

 - 각 다른 출처의 서버로부터 데이터를 요청하기 위해 사용

 - SOP 상관없이(우회) 데이터의 공유를 가능하다 

 - <script> 호출 방식을 사용 

 - HTML의 script 요소로부터 요청되는 호출에는 보안상 정책이 적용되지 않으므로 우회가 가능

 

 

 3. CORS(Cross-Origin Resource Sharing) ? 

 - (교차 출처 리소스 공유) 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 하는 체제 

 - HTTP Request 통해 허용된 요청인지 아닌지 확인하게 된다

 - 보안상의 이유로 SOP 가 적용되도록 제한되었으나 다른 도메인으로 요청이 필요하게 되어 만들어짐

 

 Simple Request 

 1. 서버에게 Origin 헤더를 추가하여 요청

 2. 서버로부터 응답을 받아 브라우저가 CORS 정책 위반 여부를 검사 

 3. Simple Request 요청 조건

    - 요청 메서드는 GET, POST, HEAD 중 1개

    - Accept, Accept-Language, Content-Language, Content-Type, DPR, Width, Save-Data, Downlink 등

    - Contnet-Type

         -> application/x-www-form-urlencoded

          -> multipart/form-data

          -> text/plain 중 

 

Preflight Reqeust(예비 요청)

 - 브라우저가 서버에 예비 요청을 하여 실제 요청을 보내는 것이 안전한지 OPTIONS Method 로 확인하는 요청 

 - 서버로부터 유효하다는 응답을 받을경우 HTTP Reqeust Method 와 함께 본 실제 요청을 보낸다.

 - 예비요청에서 유효하지 않다는 응답을 받을 경우 실제 요청은 전송 X

 - 사전요청 후 실제 요청을 함 ( 즉 요청을 두번함)

 

요청 메소드 및 헤더

 Access-Control-Request-Method  - 실제 요청 메소드

 Access-Control-Reqeust-Headers - 실제 요청 헤더

 Orign - 실제 요청 주소(URL)

 

Access-Control-Allow-Origin: URL(허용되는 주소)

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE (허용 메소드)

  

 

4. CORS 해결방법

  4.1 Chrome CORS 확장프로그램 설치 

        - Allow CORS:Access-Control-Allow-Origin 설치

        - 로컬 환경에서 CORS 문제 해결이 가능

 

 4.2 해당 요청 서버에서 Access-Control-Allow-Orign 허용하기

 4.3 프록시 서버를 통해 서버에 요청을 보낸다.