크로스도메인(Crossdomain)에서 브라우저 CORS 정책과 Simple Request, Preflighted Request 정리

브라우저는 보안상의 이유로 script안에서 crossdomain에 대한 HTTP 요청을 제한한다
XMLHttpRequest를 사용하면 crossdomain 요청을 하지 못했지만 개발자들의 요청에 의해 W3C에서 Cross-Origin Resource Sharing(CORS)를 권고한다.

CORS에서 요청은 Simple Request, Preflight request 2가지 방법있으며 아래에 자세한 설명이 되어있다.

CORS에서 사용가능한 Header정보

사용 가능한 methods

  • GET
  • HEAD
  • POST

사용가능 headers

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type

Content-Type에서 사용가능한 값

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Simple requests


사용가능한 methods, header, content-type요청은 바로 통신가능함

Crossdomain 요청 예제

서버 응답이 아래와 같으면 모든 cross-domain 접근 허용
Access-Control-Allow-Origin: *

서버 응답이 아래와 같으면 모든 http://foo.example에서만 접근 허용
Access-Control-Allow-Origin: http://foo.example

Preflighted requests

사용가능한 methods, header, content-type이외의 요청은 Preflighted requests로 진행.
Preflighted requests 요청은 OPTIONS method로 사용할 methods, headers 요청 후 서버에서 허락하면 실제 통신 가능.

Preflighted requests 예제


Resources