[react]로그인 기능 구현(프론트 백엔드 연결)

react 프론트 Django 백엔드 연결

지금은 로그인에 입력만 되어있어도 로그인 성공 취급

1. src파일 밖에 .env 파일 생성 (프론트)

axios 요청 보낼 때
직접 "http://127.0.0.1:8000" 같은 고정 주소를 쓰는 게 아니라 환경변수(VITE_API_URL) 로 관리

${import.meta.env.VITE_API_URL}

프론트에서의 설정

* 파일위치 중요

중요한 파일 위치 무조건 src 밖에 인식 못함

2. CORS 허용 설정 추가

프론트엔드(localhost:5173)에서 백엔드(127.0.0.1:8000)로 요청을 보냈는데, 백엔드에서 CORS 허용을 안 해줘서 오류남

 

CORS가 뭐야?

Cross-Origin Resource Sharing
➔ 다른 출처(Origin)끼리 통신할 때, 서버가 허용을 명시해야 한다는 규칙

주소랑 포트가 달라서 '다른 출처'로 취급함 

여기서 출처(Origin)란 이 3개가 모두 같아야 함

프로토콜	http, https
도메인	localhost, 127.0.0.1, www.example.com
포트 번호	8000, 5173 등

예시) 구분주소

React 개발 서버	http://localhost:5173
Django 서버	http://127.0.0.1:8000

여기서

• 도메인이 다름 → localhost vs 127.0.0.1
• 포트 번호도 다름 → 5173 vs 8000

그래서 브라우저가 '다른 출처'다! 라고 판단  -> CORS 허용 설정 필요 

 

1. 패키지 설치

pip install django-cors-headers

2. settings.py 수정

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 👈 이 줄 맨 위쪽에 추가
    'django.middleware.common.CommonMiddleware', 
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 맨 아래 추가

3.재시작 필요