react - django 연동 (1) : POST http://127.0.0.1:8000/test/ net::ERR_FAILED

리액트랑 장고 연동할려면

프론트엔드에서 봤을 때 장고는 그냥 데이터 쓰고 빼고 용으로만 쓰는 듯

 

암튼 

 

그래서 url.py views.py 이런거 다 설정해주고 

post 했는데

 

Access to XMLHttpRequest at 'http://127.0.0.1:8000/test/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

POST http://127.0.0.1:8000/test/ net::ERR_FAILED

 

오늘도 나를 반겨주는 에러메세지

 

 

이건 장고가보안상의 이유로 도메인 간 요청을 제한해놨다는데 

CORS(Cross-Origin Resource Sharing) 정책에 위배되어 요청이 차단되었단다

 

 

해결방법

1. 라이브러리 설치

pip install django-cors-headers

 

2. setting.py 열기

 

3. INSTALLED_APPS 바꿔주기

 

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

 

4. MIDDLEWARE 변경

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

 

5. CORS_ORIGIN_ALLOW_ALL 추가

CORS_ORIGIN_ALLOW_ALL = True

 

5-1. 특정 도메인만 추가 할려면

CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:3000', 'http://localhost:3000')

_ALLOW_ALL 이나 이거나 둘 중에 하나만 해주면 됨

 

6. CORS_ALLOW_METHODS 추가

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

 

이러면 이 에러는 해결된다 

 

근데

 

POST http://127.0.0.1:8000/test/ 403 (Forbidden)

 

바로 다음에러 등장 ㅋㅋ