vue结合axios,proxy代理配置跨越
1. 首先在配置之前需要已经在项目中引入了axios,执行
npm install axios
2. 在vue全局挂在的入口文件 main.js中应用 axios
import axios from 'axios'
3. 配置反向代理,在config文件夹下的index.js中添加
// 动态设置代理路径
let targetUrl = 'http://192.*.**.**:8089'
const proxyTable = {
'/test': {
target: targetUrl, // 接口地址
changeOrigin: true, // 是否跨域
pathRewrite: { // 重写代理名称
'^/test': '/'
},
secure: false
}
}
4. 在dev.env.js中配置 BASE_API
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"/test"'
})
5. 在axios封装文件中使用BASE_API
// 默认请求地址
axios.defaults.baseURL = process.env.BASE_API;
6. 请求调用
getRequest是我已经封装好的请求方法,根据自己的实际情况来就好。
getRequest('/demo/test1', {}).then(({ data }) => {
let backData = data
......
}
}).catch((error) => { error })