[JavaScript] CORS란?

CORS(Cross-Origin Resource Sharing) 란?

SOP 원칙을 깨고 외부 도메인에서의 요청(접근)을 허용해주는 규약.

특정 도메인에서 접근하는 것이 가능하도록 해준다. 

CORS 종류

1) Simple

2) Preflight

3) Credential

3) Non-Credential

Simple Request

필수조건

1) GET, HEAD,POST중 1가지 방식 사용해야함

2) POST일 경우 셋중 하나여야함

-application/x-www-form-urlencoded

-multipart/form-data

-text/plain

3) 커스텀 헤더를 전송하면 안됨

Preflight Request

Simple Request 조건에 해당하지 않으면 브라우저는Preflight Request방식으로 요청함

Credential Request

HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청

서버는 Response Header에 반드시 Access-Control-Allow-Credentials: true를 포함해야함

Access-Control-Allow-Origin 헤더의 값에 명확히 http://abc.com 같이 명확한 값을 줘야함

Non-Credential Request

CORS 요청은 기본적으로 Non-Credential 요청임

요청을 받는쪽에서 크로스도메인 요청을 허용

요청을 받는 서버쪽에서 크로스도메인을 통하여 요청을 오는 것을 허용해 주어야 한다.

서버의 헤더쪽에 아래 코드를 넣어줘야 한다.

Accss-Control-allow-origin : *

요청을 보내는쪽에서 크로스도메인 허용

 
$.ajax({
    type: 'POST',
    crossDomain: true,
    url: url,
    dataType: 'json',
    success: function (data, textStatus, xhr) {
        $('#bidValue').val(JSON.stringify(data));
    }
});
 

4행의 크로스도메인을 사용한다고 명시해준다. 이것만으로 통신은 불가함

꼭! 요청을 받는 서버쪽에서도 요청을 허용해준다는 코드를 넣어줘야함.

요청을 받는 서버쪽의 코드를 건들 수 없다면?

JSONP를 이용하도록 하자!