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)
})