vue-element-admin与django报错跨域问题Request header field x-token is not allowed by Access-Control-Allow-..

问题描述

在用vue-element-admin和django做前后分离的信息管理系统时，报跨域问题，通过百度，主要有三个办法，一个是配置vue的代理，一个是通过nginx去解决跨，最后一个是后端允许跨域，本文章使用的是django后端允许跨域，使用的是django提供的corsheaders。

解决步骤

vue前端使用axios.defaults.withCredentials = true设置跨域允许携带cookie，如下图

vue方面

这是在vue的src/util下的request.js文件修改。

django方面

1.安装corsheaders
pip install django-cors-headers
2.在setting安装corsheaders。

在这里插INSTALLED_APPS = [
    'corsheaders', #安装
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'SwipeModel',
    'rest_framework.authtoken',

]入代码片

3.定义跨域中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    # 定义跨域中间件
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

4.一些字定义设置

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
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',
)

分析

最关键的就是CORS_ALLOW_HEADERS部分，看到我得报错信息

就是因为请求头时候多了X-Token，django没有设置允许携带X-Token，解决办法就是加上X-Token,最后的CORS_ALLOW_HEADERS设置如下：

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'X-Token,
)

结束语

在网上找了很多的解决博客，但是没有仔细的看自己的报错，就以为是django没有解决跨域，浪费了几个钟，也因为之前是写java的，解决跨域是设置拦截器去拦截，现在接了一个刷单的项目，用的python来使用selenimu.没想到django配置更简单，刚学三天，该好好的去探索探索，切记，仔细看自己的报错信息，具体问题具体分析。