Vue CLI 是 Vue.js 官方提供用于快速構建 Vue.js 應用的腳手架工具。在使用 Vue CLI 構建應用時,我們常常會遇到跨域的問題。
所謂跨域,是指在瀏覽器中,當前網頁所請求的資源,其域名、端口號或協議與當前網頁的不同,導致請求被瀏覽器攔截。
Vue CLI 中有個配置文件 vue.config.js,可以用來配置一些構建選項,其中就包括跨域的設置。我們可以在 vue.config.js 中加入以下內容:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端服務地址
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 重寫路徑,去掉 /api
}
}
}
}
}
以上代碼指定了一個代理,將所有以 /api 開頭的請求轉發到后端服務地址 http://localhost:8080。changeOrigin 選項表示是否跨域,設置為 true,表示啟用跨域。pathRewrite 選項用來重寫請求路徑,將 /api 前綴去掉。
使用上述配置后,我們在前端代碼中發送請求時,只需要將請求路徑設置為 /api/xxx 即可,Vue CLI 會自動將請求轉發到后端服務地址。如下所示:
axios.get('/api/user')
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})
以上代碼會向 http://localhost:8080/user 發送 GET 請求,并在控制臺輸出響應結果。
上一篇vue cli 端口
下一篇vue cli 進階