[DRF] Issue Report - DRF CORS

Yungsang HwangΒ·2022λ…„ 7μ›” 18일
0

Django-Rest-Framework

λͺ©λ‘ 보기
15/15

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,
    }
profile
ν•˜λ£¨μ’…μΌ λͺ½μƒκ°€

0개의 λŒ“κΈ€