為什麼需要 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 | # settings.py |
並加入到 MIDDLEWARE:
1 | MIDDLEWARE = [ |
以及或者,允許所有來源(僅限開發環境):
1 | # 允許所有來源(開發環境用) |
這樣前端就可以正常存取 Django API 了
若您覺得這篇文章對您有幫助,歡迎分享出去讓更多人看到⊂◉‿◉つ~
留言版