1. 开发环境跨域配置

在 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

在 main.js 中：

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

axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址

页面中发送请求：

axios.post('/postData/', {

    name: 'cedric',

}).then((res) => {

  console.log(res.data)

})

此时，虽然发送的请求到地址：http://localhost:8080/api/postData/, 但是已经代理到了地址: http://127.0.0.1:8100/postData/

2. 生产环境 api 请求接口 baseUrl 配置

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

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

axios.defaults.baseURL = 'http://api.demourl.com/'

页面中 axios 请求地址的写法不变：

axios.post('/postData/', {

    name: 'cedric',

}).then((res) => {

  console.log(res.data)

})

实际请求地址为：http://api.demourl.com/postData/