通過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,這樣就可以解決跨域的問題了。