vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
前端開發(fā)時,請求后臺接口經(jīng)常需要跨域,vue-cli實現(xiàn)跨域請求只需要打開config/index.js,修改如下內(nèi)容即可。
//例如要請求的接口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': '' } } } } }
這時在你想請求接口的url處,輸入/api/look/1 即可實現(xiàn)跨域請求。
這時如果打開F12會發(fā)現(xiàn)請求的url是localhost:8080/api/look/1,這其實是虛擬從本地請求數(shù)據(jù),這樣就不會有跨域的問題產(chǎn)生了。
一般情況下上面的方法是沒有問題的,要是上面的方法行不通,可以試試這樣寫:
//例如要請求的接口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' } } } } }
這時在你想請求接口的url處,輸入/look/1 即可實現(xiàn)跨域請求。
詳情:https://vuejs-templates.github.io/webpack/proxy.html
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue實現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04使用vue自定義指令開發(fā)表單驗證插件validate.js
今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過程,需要的朋友可以參考下2019-05-05