Django+vue跨域问题解决

前端解决跨域

在Vue-cli工具中已经提供了代理的功能，配置即可
在根目录下的config/index.js文件中有如下配置项：

proxyTable: {
      '/': { 
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

• '/'表示以'/'(即所有的路径)开头的路径均需要代理，
• target:代理的目标服务器地址（即后端服务器地址）为 'http://127.0.0.1:8000/',
• changeOrigin，为修改源：修改请求中的源地址
• pathReWrite：URL路径重写，对于以'/api'开头的路径将'/api'替换为''

后端解决跨域

安装django-cors-headers第三方库

pip install django-cors-headers

配置应用目录下的settings.py文件

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ] 

MIDDLEWARE_CLASSES = (
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', # 将此行注释
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 跨域
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware'
)

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