詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
前后端分離開發(fā)中必要會遇到的問題—跨域。在使用vue開發(fā)的時候，開始為了解決跨域問題。采用的是CORS（Cross-origin resource sharing）。后臺在響應(yīng)頭中添加Access-Control-Allow-Origin。這樣就可以跨域調(diào)后臺接口了。
在前幾天無意中看到了config的index.js文件中有一個proxyTable屬性，通過配置可以解決開發(fā)環(huán)境的跨域
開發(fā)期間的API代理
當(dāng)將此樣板與現(xiàn)有后端集成時，通常需要在使用dev服務(wù)器時訪問后端API。為了實現(xiàn)這一點，我們可以并行（或遠程）運行dev服務(wù)器和API后端，并讓dev服務(wù)器將所有API請求代理到實際的后端。
要配置代理規(guī)則，請在其中編輯dev.proxyTable選項config/index.js。dev服務(wù)器正在使用http代理中間件進行代理，因此您應(yīng)參考其文檔以獲取詳細的用法。但這是一個簡單的例子：
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: { //需要rewrite重寫的, 如果在服務(wù)器端做了處理則可以不要這段
'^/api': ''
}
}
}
}
}
上面的示例將代理請求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。
如果
pathRewrite: {
‘^/api': ‘a(chǎn)pi'
},
則將代理請求/api/posts/1到http://jsonplaceholder.typicode.com/api/posts/1。
網(wǎng)址匹配
除了靜態(tài)網(wǎng)址之外，您還可以使用glob模式來匹配URL，例如/api/**。有關(guān)詳細信息，請參閱上下文匹配。此外，您可以提供一個filter可以是自定義函數(shù)的選項，以確定請求是否應(yīng)被代理：
proxyTable: {
'*': {
target: 'http://jsonplaceholder.typicode.com',
filter: function (pathname, req) {
return pathname.match('^/api') && req.method === 'GET'
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue?elementUI之this.$confirm的使用方式
這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要介紹了Vue.js進行查詢操作的實例詳解的相關(guān)資料,需要的朋友可以參考下2017-08-08
Props傳參v-for后TS報錯對象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Vue+Echarts實現(xiàn)繪制動態(tài)折線圖
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)繪制動態(tài)折線圖，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點擊、鼠標(biāo)移動、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解Vue結(jié)合后臺的增刪改案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價值,感興趣的可以了解一下2024-03-03