这个代理配置不需要后台进行ngnix代理跳转了,前端可以做。在vue.config.js文件中进行配置,如下:
module.exports = {
publicPath: process.env.VUE_APP_BASEURL || '/',
// 修改webpack的配置
configureWebpack: {
// 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
externals: {
'T': 'T'
}
},
// devServer 选项单独配置
devServer: {
https: false,
proxy: {
'/sys': {
target: process.env.VUE_APP_API_URL,//这个是全局的环境配置变量,单独建立的文件,以VUE_APP_开头的变量,每个文件中都可以访问,假设这里是http://www.sweeeper.com
changeOrigin: true,
onProxyReq: function (proxyReq) {
proxyReq.removeHeader('origin')
}
},
'/v1': {
target: process.env.VUE_APP_API_URL,
changeOrigin: true,
onProxyReq: function (proxyReq) {
proxyReq.removeHeader('origin')
}
}
},
before: app => {
// applyMock(app)
}
}
}
这里的‘/sys’是所有的axios里边的以这个开头的请求都替换成对应的http地址,这就也是所谓的前后端分离,只需要后端布置在服务器上,前端知道地址就可以进行交互。
如果已经配置了代理那么就不需要在axios中配置基地址了,因为给定的url里边已经替换了相关的字段。
像下边的就不需要设置再baseURL。(login.vue登陆文件中)
const newAxios = axios.create({
// baseURL: ROOT_URL,
timeout: 1500000
})
举个登陆请求的例子:
import { request } from '@/common/js/axios'
import MD5 from 'crypto-js/md5'
import { getToken } from '@/common/js/cache'
export function login ({ userNo, password }) {
const url = '/sys/security/logon'
return request({
url,
method: 'post',
data: {
userNo,
password: MD5(password).toString()
}
})
}
那么请求时候这个地址就变成了:http://www.sweeeper.com/security/logon