[연동문제] CORS로 인한 서버 연동문제(axios <=> django)

개요.

Django + Axios를 이용, 로컬에서 간단한 연동 후 API테스트를 진행하려던 와중 발생함.

 

문제

🔒 [26/Jun/2024 10:54:41] "OPTIONS /test/ HTTP/1.1" 200 163

(Django 서버의 응답)

분명히 Axios에 url 엔드포인트를 작성 후 요청을 보냈는데. 장고서버에는 200성공이라고 뜨고있으나..

request데이터가 로그에 뜨지 않아... 무엇이 문제인지 생각을 하고 있었다.

🔒 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

(console.log로 찍어본 에러)

.then문으로 들어온 에러를 console.log로 출력해본결과 위와 같은 에러가 발생을 하였다.

"서버에는 200이라고 뜨니까 내가 데이터 형식을 잘못보냈나보다" 라고 생각을 하고 프론트 코드에서 이것저것 다 해보았지만.. 결과는 실패..

아... 왜 200은 뜨는데 왜 데이터가 전송이 안되는거야 하던 와중.. 그럼 서버에 뜨는 로그의 뜻을 찾아보자.. 하고 찾아보았더니.. !!!!

OPTIONS 200이 나왔는데 정상적인 요청이 안보내진 이유는 CORS문제이거나 네트워크 문제라고 하는데
문제는 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 으로 되어있는것을 확인할수있다.