vuecli3.0: 开发接口转换上线接口及跨域的简单示例

开发时候的接口pai是不想改的，我们可以通过代理转发，在vue.config.js里设置。

---

【具体讲解】vue-cli 3.0之跨域请求代理配置及axios路径配置

问题：在前后端分离的跨域请求中，报跨域问题

vue.config.js：

module.exports = {
  runtimeCompiler: true,
  publicPath: '/', // 设置打包文件相对路径
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8071,
    // open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8100/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
   },
}

配置后需要重启服务。

配置axios的baseUrl。[baseurl可以加入vue的原型链，以简化原生的axios写法。]

main.js：

axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址

发送请求：

axios.post('/postData/', {
    name: 'yinlei',
}).then((res) => {
  console.log(res.data)
})

虽然请求发送到了：http://localhost:8080/api/postData/,但是已经代理到了地址：http：//127.0.0.1.8100/postData/.控制台显示请求的地址为：http://localhost:8080/api/postData/。

生产环境：

只需要将 main.js 中 axios 作如下修改：

axios.defaults.timeout = 5000 // 请求超时

axios.defaults.baseURL = 'http://yinleilei.com/'

页面中axios的请求保持不变：

axios.post('/postData/', {
    name: 'yinlei',
}).then((res) => {
  console.log(res.data)
})

实际请求地址为：
axios.defaults.baseURL = 'http://yinleilei.com/'