카테고리 없음

CORS

traveler_JH 2022. 7. 5. 15:42

CORS = Cross- Origin Resource Sharing

: 교차 출처 리소스 공유 = 다른출처 리소스 공유

:도메인 또는 포트가 다른서버의 자원을 요청하는 매커니즘

출처란? (Origin)

서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐 놓은 것

Protocol + ... + Port 까지 전부 합친것을 Origin이라고 부른다.

출처 내의 포트번호는 생략이 가능하다.

이유는 Http, Https 프로토콜의 기본 포트 번호가 정해져 있기때문 이다.

포트번호를 작성하는경우 포트번호까지 모두 일치해야 같은 출처로 인정이 된다.

하지만 이러한 케이스의 명확한 정의가 표준으로 정해진것이 아니기 때문에 케바케 가 될수있다.

(정확히 이야기하면 같은 상황인데 어떤경우에는 같은출처 또다른 경우에는 다른출처로 판단될수있다.)

우리는 브라우저의 개발자 도구의 콘솔에서 Location 객체가 가지고 있는 origin  프로퍼티에 접근함으로써 손 쉽게 어플리케이션이 실행되고 있는 출처를 알아낼 수도 있다.

SOP(Same-Origin-Policy)

웹에서는 다른출처로의 리소스 요청을 제한하는것과 관련된 두가지 정책이 있고 CORS와 SOP가 있다.

SOP는 2011년에 등장한 보안정책으로 “같은 출처에서만 리소스를 공유할수 있다.”라는 규칙을 가진 정책이다.

 

문제해결방법

CORS문제 = 다른 도메인에서 서버로 요청이 들어왔을경우 헤더에 접근을 허락하는 내용이 없어서 발생

(가장 쉬운 해결방법은 클라이언트와 서버가 같은 도메인과 포트를 사용하는 거지만.. )

방법 = 외부 서버에서 보내는 요청의 헤더(Access-Control-Allow-Origin response 헤더)에 cross origin HTTP 요청을 허가해 접근을 허락하는 내용을 추가해 주면 된다.

django-cors-headers(백엔드)

django-cors-headers는 Cross-Origin Resource Sharing(CORS) 에 필요한 서버의 헤더를 조작하기 위한 Django 앱

:헤더에 접근을 허락하는 내용을 추가

pip install django-cors-headers

django-cors-headers 장고앱을 이용해서 response에 CORS(Cross Origin Resource Sharing) 헤더를 추가

이렇게 하면 다른 서버에서로부터 내 서버 앱으로 들어오는 브라우저를 통한 요청을 허가한다.

  1. installed apps 목록에 corsheaders를 추가
INSTALLED_APPS = [
...
'corsheaders',
...
]
  1. middleware class도 추가
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # <- 가능한 높게 위치시켜야 한다.
    'django.middleware.common.CommonMiddleware', 
    ...
]

CorsMiddleware는 가능한 높게 위치시켜야 한다.

특히 Django의 CommonMiddleware나 Whitenoise의 WhiteNoiseMiddleware와 같은 응답을 생성할 수 있는 미들웨어 전이어야 한다.

이러한 미들웨어 전이 아닌 경우엔, 이러한 응답들에 CORS 헤더를 추가할 수 없기 때문이다.

:파이썬은 위에서 아래로 읽기때문

  1. Django settings에서 미들웨어의 동작을 구성해야 한다.
##CORS
CORS_ORIGIN_ALLOW_ALL=True # <- 모든 호스트 허용
CORS_ALLOW_CREDENTIALS = True # <-쿠키가 cross-site HTTP 요청에 포함될 수 있다

CORS_ALLOW_METHODS = (  #<-실제 요청에 허용되는 HTTP 동사 리스트
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CORS_ALLOW_HEADERS = ( <-실제 요청을 할 때 사용될 수 있는 non-standard HTTP 헤더 목록// 현재 기본값
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

APPEND_SLASH = False #<- / 관련 에러 제거

APPEND_SLASH는 자동으로 URL 끝에 슬래시('/')를 붙여 주는 django의 옵션으로 default값은 True이다.

브라우저에서 요청한 URL이 urls.py 파일 안에

정의된 패턴과 일치하는 것이 없을 때만 자동으로 붙여서다시 한번 일치하는 것이 있나 검사한다.

settings.py에서 APPEND_SLASH = False를 해주면 슬래시를 붙여주는 위치를 자유롭게 설계가능 하다.

프론트부분에서 해결하는 방법

1. corsmod 설정

2. 프론트엔트 Proxy우회 방법 선택