JustDoEat
[연동문제] CORS로 인한 서버 연동문제(axios <=> django) 본문
개요.
Django + Axios를 이용, 로컬에서 간단한 연동 후 API테스트를 진행하려던 와중 발생함.
문제
🔒 [26/Jun/2024 10:54:41] "OPTIONS /test/ HTTP/1.1" 200 163
🔒 ScanConfirm.tsx:41 서버로 데이터를 보내는데 실패했습니다:
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code : "ERR_NETWORK" config : {transitional: {…}, adapter: Array(3), transformRequest: Array(1),
transformResponse: Array(1), timeout: 0, …} message : "Network Error" name : "AxiosError"
request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} stack : "AxiosError: Network Error\\n at XMLHttpRequest.handleError ()\\n at Axios.request ()" [[Prototype]] : Error
OPTIONS 200이 나왔는데 정상적인 요청이 안보내진 이유는 CORS문제이거나 네트워크 문제라고 하는데
문제는 CORS문제였다.
CORS(Cross-Origin-cors-header)
“웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책에 따르면, 한 웹 페이지에서 로드된 콘텐츠는 동일한 출처(프로토콜, 도메인, 포트)가 아닌 다른 출처의 리소스에 접근할 수 없습니다.
예를 들어, [<http://요청을 보내는 서버.com>]에서 [<http://요청을 받는 서버.com에>]에 AJAX 요청을 보낼 수 없습니다”
동일 출처 정책에 의해 다른 리소스에 기본적으로 접근을 못하는데 가능하도록 하는게 CORS이다.
=> 생각해보니까 아무곳에서 요청을 막 보내면 당연히 안되겠다라는 생각이 먼저 들었다.
CORS(Cross-origin Resource Sharing) 은 어플리케이션에서 다른 어플리케이션으로 리소스를 요청할 수 있도록 도와주는 보안 기능이다.
Axios에서 Django로 api요청이 안되는것도 동일 출처정책 때문이였다.
해결을 해보자
Step1.
❓ pip install django-cors-headers
CORS (Cross-Origin Resource Sharing) 설정을 쉽게 추가할 수 있도록 도와주는 django-cors-headers 패키지를 설치
Step2.
Django에 settings.py에 들어가자
INSTALLED_APPS = [
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_WHITELIST = [
'http://localhost:5173',
]
`CORS_ORIGIN_ALLOW_ALL = True`
- corsheaders를 설치했으니 Installed_Apps에 등록을 해주고
- 미들웨어에 위와 같이 적어준다.
- CORS_ORIGIN_WHITELIST 안에는 내가 접근을 허용 할 주소만 적어주도록한다
- CORS_ORIGIN_ALLOW_ALL 이 Ture로 되어있는건 모든 주소에서 접근을 허용한다는것이니. 보안을 위해 권장하지 않고 테스트 용도로 사용할때 쓰면 좋겠다. 그게 아니라면 False로 ~
개발자 도구를 통한 확인.
`CORS_ORIGIN_ALLOW_ALL = True`
로 해놓으면 Response해더에 Allow-* 라고 되어있는걸 확인 할 수 있다.
반대로 `CORS_ORIGIN_ALLOW_ALL = True` 를 지우고
CORS_ORIGIN_WHITELIST = [
'http://localhost:5173',
]
만 해주면 두번째 사진처럼 Allow-’’’:5173 으로 되어있는것을 확인할수있다.