[영화 리뷰 사이트] 제작 후기

영화 정보를 확인하고 댓글로 리뷰를 공유할 수 있는 사이트를 구현했다. api로 데이터 받는 건 해봤지만 백과 통신하는 건 처음이어서 쉽지 않았다 .. 프론트를 제대로 공부한 지 오래되지 않아서 더했다😰

특히 나를 며칠 동안 힘들게 했던 오류들이 있었는데 ,,

 

첫 번째로 CORS 에러다. CORS는 Cross-Origin Resource Sharing의 약자로 동일한 출처의 경우 데이터 요청과 전달에 문제가 없지만, 서로 다른 리소스에서 데이터를 요청할 때 보안상의 이유로 cross-origin HTTP 요청을 제한하는 개념이다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. - MDN 문서

 

요약하자면 CORS란 서로 다른 출처간에 리소스를 전달하는 방식을 제어하는 체제라고 할 수 있다.

 

 

나는 서버는 Django로, 클라이언트는 React로 개발하여 http://localhost:3000 에서 http://127.0.0.1:8000 로 데이터를 요청하는 상황이었다. 이상하게 http://127.0.0.1:8000 로 영화 전체 데이터를 요청하고 http://127.0.0.1:8000/user/signup 으로 회원가입을 요청하는 부분에서는 통신이 잘 되었는데, http://127.0.0.1:8000/movie/1 이렇게 한 개의 영화 데이터를 요청하는 부분에서만 cors 에러가 났다.

 

처음에는 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 라는 에러가 떴다.

 

요청한 리소스에 'Access-Control-Allow-Origin 헤더가 없다는 얘기. 중간에 proxy 서버를 둬보기도 하고, 요청 헤더에 { Access-Control-Allow-Origin : "http://127.0.0.1:8000" } 추가해보는 등 별의별 방법을 다 써봤지만 해결 실패 ,,,

 

헤더를 추가하면 위와 같이 해당 헤더는 허용된 필드가 아니라고 새로운 에러가 뜬다.

 

그러다 settings.py 내 MIDDLEWARE에 추가해줘야 하는 'corsheaders.middleware.CorsMiddleware' 코드가 맨 아래에 있는 것을 발견했다. 해당 코드는 최상단에 써줘야 한다는 글을 본 기억이 나서 맨 위로 이동시켜줬다.

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

 

고치고 나니 성공 코드와 에러 코드 둘 다 날아오는 상황 발생 ,,

 

그리고 며칠 동안 안 되다가 갑자기 에러가 해결됐다 (?

 

settings.py 내 코드를 고쳐서 해결이 된 걸까 .. 3일 동안 썼다 지운 코드가 너무 많아서 정확히 어떻게 해결한 건지 잘 모르겠다 🥲 처음 작성했던 코드랑 비교해보면 사실상 프론트는 수정한 거 없고 백에서 저 코드만 수정해준 게 다여서 저게 결정적인 게 아니었나 싶다 ,,, 안 되다 갑자기 된 거라 잘 모르겠다 ㅋㅋㅋ ㅠㅠ 어쨌든 나를 3일 동안 힘들게 했던 에러였다는 건 확실

 

아 저거 말고

CORS_ALLOW_CREDENTIALS = True

이것도 추가해주긴 했다. 근데 이건 쿠키 허용하는 코드라 이건 아닐 거 같은 ,, 얘는 내가 두 번째로 힘들었던 에러 수정에 도움 됐던 코드다. 

 

일단 CORS 에러를 이해하는 데 도움 됐던 링크들 몇 개 첨부한다.

[WEB] 📚 CORS 개념 💯 완벽 정리 & 해결 방법 👏

지긋지긋한 CORS 파헤쳐보자

Cross Origin Resource Sharing - CORS

[javascript] 요청 헤더 필드 Access-Control-Allow-Headers는 Access-Control-Allow-Headers에서 허용되지 않습니다.

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

[Django] 장고 CORS 크로스 도메인 이슈

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

 

두 번째는 쿠키값 저장이다. 로그인 했을 때 서버에서 응답 코드와 함께 쿠키값을 전달해주면 해당 쿠키값을 저장하고 있다가 댓글 작성을 요청할 때 헤더에 담아서 같이 보내주어야 하는데, 응답 창을 아무리 뒤져도 쿠키값을 찾을 수가 없었다 ,,

이렇게 네트워크탭에서는 확인이 되는데 

 

response.header 를 찍어보면 빈 값만 나온다.

CORS에서는 기본적으로 쿠키를 request headers에 넣어주지 않아서 아래와 같이 프론트에서 axios 요청을 할 때 헤더에 withCredentials 부분을 true로 수동으로 바꿔주고, 서버에서는 응답 헤더에 Access-Control-Allow-Credentials를 true로 설정해주어야 한다고 한다.

 

// client
withCredentials: true

# server
CORS_ALLOW_CREDENTIALS = True

똑같이 다 설정해주었지만 계속해서 빈 값만 나오는 상황 ,, 

 

react router props 전달 & 브라우저에 쿠키 저장이 안되는 문제 해결

위 사이트 내용을 살펴보니 request, response 헤더 모두 credentials가 true로 표시되어 있어야 한다고 한다. 네트워크창을 다시 보니까 request 헤더에는 crential 필드 자체가 없다 ,,, 왜 없니?

 

이건 결국 해결 못 했다 ㅎㅎ,,, 혹시 방법 아시는 분 도움 주시면 감사하겠습니다 🥲

 

도움 됐던 자료들

[AXIOS] 📚 CORS 쿠키 전송하기 (withCredentials 옵션)

OKKY | javascript에서 response header에 접근하는 방법

[React] axios 의 withCredentials

 

그 밖에 로그인, 로그아웃, 회원가입 구현하는 데 도움이 많이 됐던 자료들

5. [Client & Server] Login, Logout 구현 (Oct 21, 2020 ~ Oct 25, 2020 회고)

[React] axios 로 Post 요청으로 회원 가입 구현

[자바스크립트] localStorage, sessionStorage 클라이언트에 정보 저장

 

---

 

결과물

css 너무 어렵다 🥲 어떻게 배치해야 더 예쁘고 보기 좋을지 잘 모르겠다 ㅎㅎ,.,.. 어쨌든 최선을 다 했다 나는 ,,,,

에러 해결해보겠다고 삼촌 회사 가서 개발자분들한테 도움받고 별의별 경험 다해봤다 😂