1. 程式人生 > >django與vue開發中跨域請求問題

django與vue開發中跨域請求問題

CSRF(Cross-site request forgery)跨站請求偽造,也被稱為“One Click Attack”或者Session Riding,通常縮寫為CSRF或者XSRF,是一種對網站的惡意利用。儘管聽起來像跨站指令碼(XSS),但它與XSS非常不同,XSS利用站點內的信任使用者,而CSRF則通過偽裝來自受信任使用者的請求來利用受信任的網站。與XSS攻擊相比,CSRF攻擊往往不大流行(因此對其進行防範的資源也相當稀少)和難以防範,所以被認為比XSS更具危險性。所以django框架會對跨域進行保護。以下是解決辦法:

對於axios

axios 預設是不傳送cookie,跨域也是一個原因,需要全域性設定。我們需要在引入axios後進行如下設定:

axios.defaults.withCredentials = true

對於django

安裝django-cors-headers,詳情請看官方文件

pip install django-cors-headers

配置settings.py檔案

a.在INSTALLED_APPS裡新增“corsheaders”

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
 ] 

b.在MIDDLEWARE_CLASSES新增 ‘corsheaders.middleware.CorsMiddleware’, ‘django.middleware.common.CommonMiddleware’

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', 
    ...
)

c.在sitting.py底部新增

#跨域增加忽略
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 = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)