django与vue前后端分离csrf跨域问题

1.安装django-cors-headers：

pip install django-cors-headers

2.在settings.py中启用django.middleware.csrf.CsrfViewMiddleware中间件：

MIDDLEWARE = [

 ...

 'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware', # 注意顺序

 ....

]

 

3.跨域增加忽略
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',
    'Pragma',
)

4.使用get_token(request)获取csrftoken返回给前端（前端第一次访问要用GET方法请求）：

import json
from django.middleware.csrf import get_token 
def search(request):
  result = {'Succeed':True,'Data':get_token(request)}
  return HttpResponse(json.dumps(result,ensure_ascii=False),content_type="application/json,charset=utf-8")

5.前端请求配置，这里使用的axios：

const service = axios.create({

baseURL: process.env.BASE_API, // api的base_url

//这三个是重点

xsrfCookieName: 'csrftoken',

xsrfHeaderName: 'X-CSRFToken',

withCredentials: true,

})

// request拦截器设置请求头

service.interceptors.request.use(config => {

let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值

config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];

//注：这里的cookie里的csrftoken是第一次GET请求里返回并保存到cookie里的

// config.headers['Content-Type'] = 'application/x-www-fromurlencodeed'

// config.headers['Access-Control-Allow-Credentials']=true

return config

}, error => {

console.log(error)

Promise.reject(error)

})