vue-cli開發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法
前端開發(fā)時(shí)，請(qǐng)求后臺(tái)接口經(jīng)常需要跨域，vue-cli實(shí)現(xiàn)跨域請(qǐng)求只需要打開config/index.js，修改如下內(nèi)容即可。
//例如要請(qǐng)求的接口url為http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/api':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
這時(shí)在你想請(qǐng)求接口的url處，輸入/api/look/1 即可實(shí)現(xiàn)跨域請(qǐng)求。
這時(shí)如果打開F12會(huì)發(fā)現(xiàn)請(qǐng)求的url是localhost:8080/api/look/1，這其實(shí)是虛擬從本地請(qǐng)求數(shù)據(jù)，這樣就不會(huì)有跨域的問題產(chǎn)生了。
一般情況下上面的方法是沒有問題的，要是上面的方法行不通，可以試試這樣寫：
//例如要請(qǐng)求的接口url為http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/look':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/look': '/look'
}
}
}
}
}
這時(shí)在你想請(qǐng)求接口的url處，輸入/look/1 即可實(shí)現(xiàn)跨域請(qǐng)求。
詳情：https://vuejs-templates.github.io/webpack/proxy.html
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue監(jiān)聽滾動(dòng)事件的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue3使用mqtt的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue使用WebSocket模擬實(shí)現(xiàn)聊天功能
這篇文章主要介紹了vue使用WebSocket模擬實(shí)現(xiàn)聊天功能,通過創(chuàng)建node服務(wù)和server.js文件實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-08-08
element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue車牌輸入組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價(jià)值，感興趣的可以了解一下2023-09-09
前端數(shù)據(jù)存儲(chǔ)常用工具Vuex、Pinia、Redux詳解
Redux、Vuex 和 Pinia 都是用于狀態(tài)管理的流行框架,這篇文章主要介紹了前端數(shù)據(jù)存儲(chǔ)常用工具Vuex、Pinia、Redux的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個(gè)靜態(tài)方法，用于將鍵值對(duì)列表（如數(shù)組）轉(zhuǎn)換為對(duì)象，如果在當(dāng)前環(huán)境中不支持該方法，可以使用?polyfill?來提供類似功能，接下來通過本文介紹electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function的解決方案2023-05-05