通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同,而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。
首先在根目录创建vue.config.js文件,这个配置文件在运行项目的时候自动加载。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://xxxx/device/', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
这个文件还可以配置其它信息,比如修改端口号,默认是8080等等。
最后在页面发送请求的时候:
axios.get('/api/getDataPoint').then(res => {
console.log(res)
})
虽然我们在控制台看到请求的地址还是原本的路径,但是已经代理请求到http://xxxx/device/getDataPoint,这样就可以解决跨域的问题了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。