经过vue-cli3.x版本构建的项目使用proxy和之前的项目不一样,并且3.x版本构建的时候能够选用typescript了。下面记录一下如何使用proxy跨域。
首先在根目录建立vue.config.js文件,这个配置文件在运行项目的时候自动加载。vue
// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://xxxx/device/', //对应本身的接口 changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } } }
这个文件还能够配置其它信息,好比修改端口号,默认是8080等等。
最后在页面发送请求的时候:ios
axios.get('/api/getDataPoint').then(res => { console.log(res) })
虽然咱们在控制台看到请求的地址仍是本来的路径,可是已经代理请求到http://xxxx/device/getDataPoint,这样就能够解决跨域的问题了。vue-cli