这里以vue-cli3生成的项目为例
配置devServer.proxy
首先我们假设有一个接口 GET https://www.abc.com/users
其次初始化axios
// ./http.js
import axios from 'axios'
const baseURL = process.env.NODE_ENV === 'production' ? 'https://www.abc.com/' : 'api/'
export default axios.create({
baseURL
})
调用接口
// ./index.js
import http from './http.js'
http.get('/users ')
.then(val => {
// ..
}).catch(e => {
//..
})
于是如果是生产环境下, 就会请求https://www.abc.com/users没啥问题, 开发环境下会请求api/users
然后我们去配置devServer.proxy
// vue.config.js
module.exports = {
devServer: {
proxy: {
// 匹配所有以api开头的请求路径
'/api': {
target: 'https://www.abc.com/',
ws: true,
changeOrigin: true,
secure: false,
// 把api替换掉
pathRewrite: {
'^/api': ''
}
}
}
}
}
这样就可以把api/users 请求, 通过代理转去请求https://www.abc.com/users了
