内容提要:
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。配置方法如下:
安装第三方库django-cors-headers
pip install django-cors-headers -i https://pypi.douban.com/simple
在项目的settings.py中配置如下内容。
# settings.py
INSTALLED_APPS = [
...省略...
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 需要放在最前面(csrf前面即可)
...省略...
]
# 支持跨域的配置
CORS_ORIGIN_ALLOW_ALL = True此时重启项目,后端接口就支持跨域请求了。
Vue(vue-element-admin)
使用vue-element-admin进行二次开发,在此项目中配置支持跨域。
配置方法如下:
打开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')
},修改.env配置文件,例如修改.env.development。
# 内容修改为空即可
VUE_APP_BASE_API = ''此时再重启项目,调用不同域名(或端口)的网页,跨域成功。