vue-cli3.0项目使用proxy跨域

发表于

通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同，而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。

  • 首先在根目录创建vue.config.js文件，这个配置文件在运行项目的时候自动加载。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // vue.config.js
    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://xxxx/device/', //对应自己的接口
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    }

这个文件还可以配置其它信息，比如修改端口号，默认是8080等等。

  • 最后在页面发送请求的时候：
    1
    2
    3
    axios.get('/api/getDataPoint').then(res => {
      console.log(res)
    })

虽然我们在控制台看到请求的地址还是原本的路径，但是已经代理请求到http://xxxx/device/getDataPoint，这样就可以解决跨域的问题了。