django rest jwt vue 跨域問題

django rest jwt vue 跨域問題

關於JWT 請參考:JSON Web Token 入門教程 - 阮一峯的網絡日誌

跨域報錯信息: Failed to load http://127.0.0.1:8200/api/jwt-auth/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9528' is therefore not allowed access.

跨域：

簡單來講就是 A 網站的 javascript 代碼試圖訪問 B 網站，包括提交內容和獲取內容。這顯然是不安全的。爲此，瀏覽器的鼻祖：網景（Netscape）公司提出了優秀的解決方案：著名的瀏覽器同源策略。如今全部支持JavaScript的瀏覽器都會使用這個策略。

同源：

域名、協議、端口均相同的網站即爲同源。

流程：

當一個瀏覽器的兩個Tab頁分別打開百度和谷歌頁面時，百度發起一個腳本執行，此時瀏覽器會檢查該腳本屬於哪一個頁面。即檢查是否同源。只有和百度同源的腳本纔會被執行。若非同源，在請求數據時，瀏覽器會在控制檯報一個異常。提示拒絕訪問。

解決方法:

1. 安裝django-cors-headers

pip install django-cors-headers

2. settings.py配置

INSTALLED_APPS = [
    ...
    "corsheaders"，
...
]
 
MIDDLEWARE_CLASSES = (
    ...
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware",  # 注意順序
...
)
# 跨域增長忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    "*"
)
 
CORS_ALLOW_METHODS = (
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
    "VIEW",
)
 
CORS_ALLOW_HEADERS = (
    "XMLHttpRequest",
    "X_FILENAME",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
)