📌소개

강의링크 바로가기

📌배운내용 정리

API fetch 순서정리

1. fetch() try

2. CORS errors 발생

3. 'django-cors-headers' install

4. 'django-cors-headers' setting - THIRD_PARTY_APPS, MIDDLEWARE, CORS_ALLOWED_ORIGINS

이하에서는 위 과정을 실제로 구현하는 방법과 구체적인 코드를 정리하겠습니다.

CORS errors 발생 및 해결방법

다른 사이트에서 내가 만든 API를 fetch() 하려고 시도하면 CORS error 가 발생한다. (이것은 기본값이다.)
👉 즉 CORS error 가 발생하는 것이 당연하다.

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
Link to Doc MDN

useEffect(
	fetch("http://127.0.0.1:8000/api/v1/rooms/");
, [])

// 프론트에서 위와 같이 fetch() 하려고 시도하면 CORS error 가 발생한다.

백엔드 프로젝트에 'django-cors-headers' install

😍 Step 1
pip install django-cors-headers # 기본설치
Or
poetry add django-cors-headers # 가상환경에 django-cors-headers 설치
# 반드시 백엔드 서버에 설치해야합니다. 

django project 'settings.py' 파일에 내용추가

<# 😍 Step 2
file : airbnb_clone\settings.py

THIRD_PARTY_APPS = [
  	# ...중략
    "corsheaders", # 😍 add this code line
]
...

# 😍 Step 3
MIDDLEWARE = [
    # ...중략
    "corsheaders.middleware.CorsMiddleware", # 😍 add this code line
]
...

# 😍 Step 4
CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://127.0.0.1:9000",
    "http://localhost:3000", # 참고로 마지막에 '/'가 있으면 반드시 제거해야 한다. 
    
    # 예시) "http://localhost:3000", 👉 (Ok) 👍 😄
    # "http://localhost:3000/", 👉 (No!!) 👎 😓
]

Link to Doc django-cors-headers

이제부터는 프론트엔드 프로젝트에서 백엔드 API 를 사용하기 위해서 항시 백엔드서버가 켜져있어야 합니다. 😄

npm start 하면 아래와 같은 메세지가 뜬다.

위 이미지를 보면

Local: http://localhost:3000
On Your Network: http://192.168.0.64:3000

가 존재한다.

우리는 위의 주소를 모두 백엔드 세팅즈에 추가한다.

그리고 브라우저에서
http://192.168.0.64:3000 주소로 접속을 시도한다.

짜잔.

📌Grab a Keyword

CORS errors

pip install django-cors-headers

📌Grab a Key Concept

한줄평

알고나면 역시... 항시 별것도 아닌것 같은 기분이야 ㅋㅋ 😄🤩😋✍🤞🤣🤗❤😍💕💖