🚨상황
- 백엔드와 프론트엔드가 분리되어있는 상황에서 프론트엔드에서 회원가입을 시도함
- 회원가입 버튼을 누르면 signup.js의 signup()함수가 제대로 작동하지 않음
- 오류코드
"OPTIONS /user/signup/ HTTP/1.1" 200 163
가 떴음
- 어떤 문제인지 살펴보니
CORS 관련 설정
을 하나도 해주지 않아 발생하는 문제였음
🚀트러블슈팅
[TIL] OPTIONS
요청은 왜 발생하는가?
Django CORS 에러 처리하기
- django settings.py에 아래 코드를 추가해줌으로써 CORS 설정을 진행하였음
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,
}