[Project] React frontend와 Django REST API backend 사이의 CORS violation

[jaewooklee93]

안녕하세요. 소개원실 수강생 이제욱 학생입니다.

지금까지 HW3, HW4를 통해 배운 내용을 토대로 간단한 React frontend와 Django backend를 구성해보고, React쪽에서 axios.get 을 통해 Django쪽에 정의된 API endpoint로 GET reqeuest를 날려보았습니다. 그랬더니 axios.get이 정상 response를 받아오지 못하고 아래와 같은 에러가 일어나네요.

React component 내부의 코드는 다음과 같습니다. (버튼을 누르는 동작에 대한 handler입니다.)

onSubmit(event){

    // suppress default button click behavior of refresh
    event.preventDefault();

    axios.get(
        'http://localhost:8000/api/echo/',
        {headers: {
            'Access-Control-Allow-Origin': '*', // not working
        }}
    )
    .then(result => console.log(result)) // not executed
    .catch(err => console.log(err));     // instead, this line is executed
}

Chrome의 console 창에 나타나는 frontend측 에러는 다음과 같습니다 Access to XMLHttpRequest at 'http://localhost:8000/api/echo/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:91)

반면 Django 서버 쪽의 로그를 보면 아래와 같이 정상적인 200 Response가 표시되어 있습니다.

[29/Oct/2020 13:48:48] "OPTIONS /api/echo/ HTTP/1.1" 200 0

이 문제에 대해 조금 구글링해보니 저희가 배웠던 SOP policy와 비슷하게 CORS policy라는 것도 있어서, localhost:3000 (React)와 localhost:8000 (Django)가 서로 다른 origin으로 인식되고, request를 보내면 자동적인 차단이 이루어지는 것으로 보입니다

문제는 스택오버플로 같은 곳에서 많은 사람들이 이 문제로 고통받고 있는 것에 비해 마땅한 해결책이 있는것 같지가 않네요. 원래는 됐었던 방법도 나중에는 막히기도 하는 것 같고요.

우선은 Python django-cors-headers 패키지를 사용하는 것이 가장 적절한 해결책으로 보이는데 https://github.com/adamchainz/django-cors-headers 설치법을 따라해보아도 문제가 해결되지 않습니다 ㅠㅠ

작년 수강생들도 React와 Django 조합을 썼던 것으로 들어서 검색을 해보았는데 https://github.com/swsnu/swppfall2019/issues/187 이 방법을 시도해보아도 지금은 해결이 안되는 것 같습니다.

혹시 나중 실습 수업에서 CORS violation을 해결하는 방법을 다루게 되는 것인지 궁금합니다

[kooyunmo]

React와 Django를 연결하는 작업은 오늘 실습에서 다룰 예정입니다.

[jaewooklee93]

앗 그렇군요. 오늘 실습 내용이 정말 큰 도움이 될 것 같습니다. 감사합니다