vue配置转发代理_vue+django开发配置(vue转发请求、跨域携带cookie)

开发中：

由于vue有个前端服务器做内容转发，所以前端服务器和后端服务器的交互是跨域的状态，不会携带cookie

vue代理的作用：

例如：前端服务器是127.0.0.1:8080，后端服务器是127.0.0.1:9000，那么前端访问后端资源就是跨域的，获取静态资源和调用后端接口都得定义一个地址才可正常访问

代理会将设置的路径转发至127.0.0.1:9000，所以只需要配置好代理，前端就可以直接输入后端路径即可

vue代理转发配置：

(为了转发请求，上线时候不需要改代码)

// vue.config.js中配置

module.exports ={

devServer: {

host:"0.0.0.0", // 前端启用的地址, 0.0.0.0表示绑定该机器的所有ip地址

port:"8080", // 前端启用的端口

disableHostCheck:true,

proxy: {'/api': {

target:'http://127.0.0.1:9000',　　//请求的域名 + 端口，当别人要访问时候不能是127.0.0.1

changeOrigin: true,　　　　　　//是否跨域

},'/static': { //这里最好有一个 /

target: 'http://127.0.0.1:9000', //后台接口域名

changeOrigin: true, //是否跨域

}

}

},

}

// 当访问/static/image/1.png时候，代理会转发到http://127.0.0.1:9000/static/image/1.png

django后端跨域配置：

// 为了前端能正常请求非get请求，并且可以携带cookie

安装模块：pipinstall django-cors-headers

settings配置：

1. INSTALLED_APPS中添加corsheaders

2. 添加中间件

'corsheaders.middleware.CorsMiddleware',

3. 添加这个中间件的配置信息 // 底部即可

CORS_ALLOW_CREDENTIALS =True

CORS_ORIGIN_ALLOW_ALL=True

CORS_ORIGIN_WHITELIST=(

#'http://127.0.0.1:8080',

)

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','Cookie',

)

前端axios跨域携带cookie

// axios跨域请求携带cookie

withCredentials:true  // 请求携带cookie

以上配置完就可以正常的vue和django合一开发了！