場景：需要跨域請求接口
操作：
1.下載依賴
npm install axios @nuxtjs/axios @nuxtjs/proxy
2.在 nuxt.config.js 文件里面添加以下配置
modules: ['@nuxtjs/axios', "@nuxtjs/proxy"],
/*
** axios proxy
*/
axios: {
proxy: true
},
/*
** proxy
*/
proxy: {
// 一旦devServer(5000)服務(wù)器接收到 /api/xxx 的請求，就會把請求轉(zhuǎn)發(fā)到另一個服務(wù)器(3000)
// 瀏覽器和服務(wù)器之間有跨域，但是服務(wù)器和服務(wù)器之間沒有跨域
'/api/': {
target: 'http://www.XXX.com:xxxx',
// 發(fā)送請求時，請求路徑重寫：將 /api/xxx --> /xxx （去掉/api）
pathRewrite: {
'^/api/': ''
}
}
},
build: {
vendor: ['axios'],
}
3.使用
return this.$axios.get('/api/xxx', { params: { keywords: this.xxx} })
.then((res) => {
console.log(res)
})
然后就可以正常訪問，但是同時出現(xiàn)了另外一個問題：
proxy只能用于開發(fā)環(huán)境
導(dǎo)致部署以后訪問的接口地址變成了這樣的
圖片.png
解決方法
修改axios請求的寫法，配置axios的baseUrl地址，根據(jù)判斷為生產(chǎn)環(huán)境還是開發(fā)環(huán)境動態(tài)設(shè)置，如果時生產(chǎn)環(huán)境則baseUrl = “”，開發(fā)環(huán)境baseUrl=“/api”，這樣以適應(yīng)不同環(huán)境，OK修改完成，無論開發(fā)或生產(chǎn)環(huán)境均可正常運行，不需要額外修改。
