vue结合axios，proxy代理配置跨越

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 })

7. 此时的请求地址代理成功