vue-cli開(kāi)發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法
前端開(kāi)發(fā)時(shí),請(qǐng)求后臺(tái)接口經(jīng)常需要跨域,vue-cli實(shí)現(xiàn)跨域請(qǐng)求只需要打開(kāi)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í)如果打開(kāi)F12會(huì)發(fā)現(xiàn)請(qǐng)求的url是localhost:8080/api/look/1,這其實(shí)是虛擬從本地請(qǐng)求數(shù)據(jù),這樣就不會(huì)有跨域的問(wèn)題產(chǎn)生了。
一般情況下上面的方法是沒(méi)有問(wèn)題的,要是上面的方法行不通,可以試試這樣寫(xiě):
//例如要請(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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解vue-cli4 配置不同開(kāi)發(fā)環(huán)境打包命令
- 新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法
- 使用vue-cli+webpack搭建vue開(kāi)發(fā)環(huán)境的方法
- 詳解vue-cli開(kāi)發(fā)環(huán)境跨域問(wèn)題解決方案
- Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解
- vue-cli webpack 開(kāi)發(fā)環(huán)境跨域詳解
- vue cli 3.0下配置開(kāi)發(fā)環(huán)境下的sourcemap問(wèn)題
相關(guān)文章
Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)
這篇文章主要介紹了Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
在 Vue 3 項(xiàng)目開(kāi)發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來(lái)構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見(jiàn)的需求,下面我們就來(lái)學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01vue出現(xiàn)Uncaught SyntaxError:Unexpected token問(wèn)題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04使用vue自定義指令開(kāi)發(fā)表單驗(yàn)證插件validate.js
今天就來(lái)介紹一下如何利用vue的自定義指令directive來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)程,需要的朋友可以參考下2019-05-05