vue中的代理proxy
1.解决的问题:
前后端分离而产生的本地开发跨域问题
2.原理:
服务器端之间不存在跨域,利用了node代理,将域名发给本地服务器,再由本地服务器请求目的服务器
3.不同版本配置文件的区别
新版本的vue跨域在vue.config.js文件(需要手动创建)配置
旧版本的在build文件夹下面的webpack.dev.conf.js文件(自动创建)配置
4.配置
配置的是devServer(本地服务器配置)下面的proxy(代理)属性
有些博客会写proxyTable是因为写在其他文件,然后再引进vue.config.js(或者webpack.dev.conf.js)
config文件夹下的index.js文件:
vue.config.js文件(或者built文件夹下的webpack.dev.conf.js文件):
在该文件中引入config,引入文件夹会自动读取该文件夹下的index.js
config.dev.proxyTable赋值给proxy,本质上配的是proxy属性
index.js
devServer:{
proxy:{
'/api': {
target: 'https://lst.com:3000',//后台接口域名
changeOrigin: true,//是否跨域
secure: true, // 如果是https接口,需要配置这个参数
pathRewrite: {
'^/api': ''
},
}
}
假设本地路径是http://127.0.0.1:8080
proxy对象的’/api’属性相当于是一个标识,告知node,路径为/api时,我需要代理帮我跨域,地址是https://lst.com:3000,此时请求地址为:https://lst.com:3000/api/xx/xxxx,
但我真正要请求的地址是https://lst.com:3000/xx/xxxx,这时候 pathRewrite属性就很重要了,’^/api’:’ ’ 利用正则匹配/api,替换成空字符串,这样请求地址就变成了我们想要的地址。