為什麼需要 CORS Header？

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

✅ 允許：

• React: http://localhost:8000
• Django: http://localhost:8000

🚫 阻擋：

• React: http://localhost:3000
• Django: http://localhost:8000

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

Django CORS Header 設定

1

pip install django-cors-headers

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

首先在 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 了

• ← Previous Post
• Next Post →