vue element admin 二次开发_Vue+Django Rest Framework跨域问题解决

内容提要：

• vue和django rest framework跨域配置。

问题背景

跨域是指浏览器从一个域名的网页访问另一个域名的资源时，协议、域名、端口不同，都是跨域请求。JavaScript的同源策略规定，只有协议、主机名、端口号均相同时，才允许互相访问。

前后端分离的模式下，前后端分别部署，导致域名、端口不一致。此时就会产生跨域请求的场景。

以下环境的配置：

• Django 2.2

• djangorestframework 3.11.1

• vue 2.6.10

• vue-element-admin 4.4.0

Django Rest Framework

本文使用第三方库django-cors-headers。配置方法如下：

1. 安装第三方库django-cors-headers

   pip install django-cors-headers -i https://pypi.douban.com/simple
   

2. 在项目的settings.py中配置如下内容。

   # settings.py
   INSTALLED_APPS = [
       ...省略...
   'corsheaders',
   ]
   
   MIDDLEWARE = [
   'corsheaders.middleware.CorsMiddleware',  # 需要放在最前面(csrf前面即可)
       ...省略...
   ]
   
   # 支持跨域的配置
   CORS_ORIGIN_ALLOW_ALL = True
   

3. 此时重启项目，后端接口就支持跨域请求了。

Vue(vue-element-admin)

使用vue-element-admin进行二次开发，在此项目中配置支持跨域。

配置方法如下：

1. 打开vue.config.js文件，增加如下内容：

   # vue.config.js
   module.exports = {
     //...省略...
     devServer: {
       port: port,
       open: true,
       overlay: {
         warnings: false,
         errors: true
       },
       //增加如下内容
       proxy:{
         [process.env.VUE_APP_BASE_API]: {
           target: 'http://127.0.0.1:8000',  // 转发的url
           changeOrigin: true,  // 支持跨域
           pathRewrite: {
             ['^' + process.env.VUE_APP_BASE_API]: ''
           }
         }
       },
       before: require('./mock/mock-server.js')
     },
   

2. 修改.env配置文件，例如修改.env.development。

   # 内容修改为空即可
   VUE_APP_BASE_API = ''
   

3. 此时再重启项目，调用不同域名(或端口)的网页，跨域成功。