[Network] Cross-Origin Resource Sharing

Bik_Kyun·2022년 3월 13일
0
post-thumbnail

1. 교차 출처 리소스 공유

추가적인 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 에플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제. 웹 어플리케이션은 리소스가 자신의 도메인/프로토콜/포트 와 다를 때 교차 출처 HTTP 요청을 실행한다. -MDN

CORS는 브라우저와 서버가 서로 통신할 때 등장하는 개념으로 HTTP 헤더를 기반으로 동작한다. 서버는 어떤 출처가 자신의 리소스를 가져갈 수 있는지 설정하고, HTTP 헤더를 사용해 요청의 출처를 확인한다. SOP 위반일 때 요청이 실행된다고 생각하자.

부록) Preflight 메커니즘

브라우저가 실제 요청에 앞서 자신이 어떤 HTTP 메소드를 사용할 것인지 서버에 미리 알리고 실제 요청이 허락될지 확인하는 과정.
모든 HTTP 요청이 프리플라이트를 띄우지는 않는다.(get요청...)
서버에 정보를 업데이트 하는 요청(post)의 경우에는 프리플라이트에 해당하는 http 메소드인 options가 먼저 서버에 날라가, 허용될 지 여부를 알아온다.

2. CORS 요청 종류

1) Simple Request

단순요청의 요건
1. HTTP 메소드는 다음 셋 중 하나일 것.

  • GET
  • HEAD
  • POST
  1. 브라우저 기본 세팅으로 설정된 헤더.
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  1. Content-Type 헤더의 값은 다음 셋 중 하나일 것.
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
  1. 요청에서 이벤트 리스너가 사용되지 않아야 함.
  2. 요청에서 ReadableStream이 사용되지 않아야 함.

2) Preflight Request

3) Credential Request

서버와 쿠키, 세션 등을 통해 통신한다면 반드시 withCredentials값을 True로 설정해주어야 한다.
이 때, 서버는 반드시 Access-Control-Allow-Origin 값으로 *를 사용하지 않고 정확한 출처를 명시해야한다.

4) Request without Credential

withCredentials값을 별도로 설정하지 않는 경우

3. 사용 예시

settings.py

1.

INSTALLED_APPS =[
	.....
    'corsheaders',
]

2.

MIDDLEWARE = [
	.....
	'corsheaders.middleware.CorsMiddleware',
]

3.

##CORS
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)
profile
비진

0개의 댓글