djangorestjwtvue跨域問題

django rest jwt vue 跨域問題

跨域報錯資訊: 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

1. 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",
   
   )

本文來自雲棲社群合作伙伴“開源中國”

本文作者：_Change_ 

原文連結