2025 OEM 網站開發筆記 [80] - Django CORS Header 設定

Posted by Young on 2025-03-12
Estimated Reading Time 1 Minutes
Words 295 In Total

為什麼需要 CORS Header?

當 React 前端(運行於 http://localhost:3000 或你的域名)請求 Django 後端(運行於 http://localhost:8000 或另一個域名)時,瀏覽器的同源政策(Same-Origin Policy, SOP) 預設只允許相同來源(protocol, domain, port 都相同)的請求,例如:

✅ 允許:

瀏覽器會因為 同源政策(Same-Origin Policy) 而阻止這些請求,除非 Django 啟用了 CORS 設定,CORS 就是為了解決這個問題的標準機制,允許你明確指定哪些來源可以存取 Django API

Django CORS Header 設定

1
pip install django-cors-headers

在還沒有 cor-header 的情況下,會看到類似以下的錯誤:

cors-header-error

首先在 INSTALLED_APPS 中加入 corsheaders

1
2
3
4
5
6
# settings.py
INSTALLED_APPS = [
...
# cors
'corsheaders',
]

並加入到 MIDDLEWARE:

1
2
3
4
5
MIDDLEWARE = [
...
# Cors
"corsheaders.middleware.CorsMiddleware",
]

以及或者,允許所有來源(僅限開發環境):

1
2
3
4
5
6
7
8
9
10
# 允許所有來源(開發環境用)
CORS_ALLOW_ALL_ORIGINS=True

CORS_ALLOWED_ORIGINS = [
# "http://localhost:3000", # 不要加 /
"http://localhost:5173", # Vite 開發伺服器
"http://127.0.0.1:5173",
"http://localhost:8080",
"http://127.0.0.1:9000",
]

這樣前端就可以正常存取 Django API 了


若您覺得這篇文章對您有幫助,歡迎分享出去讓更多人看到⊂◉‿◉つ~


留言版