Issue Report - CORS (FE)

🚨상황

• 백엔드와 프론트엔드가 분리되어있는 상황에서 프론트엔드에서 회원가입을 시도함
  • 회원가입 버튼을 누르면 signup.js의 signup()함수가 제대로 작동하지 않음
  • 오류코드 "OPTIONS /user/signup/ HTTP/1.1" 200 163 가 떴음
  • 어떤 문제인지 살펴보니 CORS 관련 설정을 하나도 해주지 않아 발생하는 문제였음

🚀트러블슈팅

[TIL] OPTIONS 요청은 왜 발생하는가?

Django CORS 에러 처리하기

• django settings.py에 아래 코드를 추가해줌으로써 CORS 설정을 진행하였음

# settings.py

ALLOWED_HOSTS = ['*']

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:5500',
    'http://127.0.0.1:8000',
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

CSRF_TRUSTED_ORIGINS = (
    'http://127.0.0.1:5500',
)

INSTALLED_APPS = [
		'corsheaders',
]

# 순서가 중요! 제일 위에 적을 것
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

🚨두번째 상황 발생

• 이후 로그인을 시도하였으나 아래와 같은 문제가 발생함
• "POST /user/signup/ HTTP/1.1" 400 45 Bad Request
• view.py 에서 print(request.data) 찍어봄
• {'userid':’user, 'password': 'user', 'nickname': 'user', 'email': 'user@gmail.com'}
• 여기서 잘못된 것은 ‘userid’ 가 아니라 ‘username’으로 받아야 한다는 것!
• data 를 보낼때 백엔드에서 설정한 이름과 같아야 했으나, 임의로 userid라고 벨류값을 보내주어서 발생한 문제였음
• **프론트엔드에서도 개발명세를 참조하여 작성하여야 한다!**

🚀두번째 트러블 슈팅

• 아래와같이 백엔드와 값을 맞춰준 후 회원가입에 성공

async function signup(){
    const signupData = {
        username : document.getElementById("username").value,
        password : document.getElementById("password").value,
        nickname : document.getElementById("nickname").value,
        email : document.getElementById("email").value,
    }