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

青旅半醒 2022-03-25 03:58 444阅读 0赞

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\];