webpack配置proxyTable時pathRewrite無效的解決方法
本人webpack版本3.6，webpack-dev-server版本2.9.1，本人按照網上寫的版本折騰兩天都沒通，無意間自己試通了，猜測網上大部分都是照本宣科，沒有自己實踐
webpack配置接口地址代理
在項目開發(fā)中，接口聯(lián)調的時候一般都是同域名下，且不存在跨域的情況下進行接口聯(lián)調，但是當我們在本地啟動服務器后，比如本地開發(fā)服務下是 http://localhost:8080 這樣的訪問鏈接，但是我們的接口地址是 http://www.xxx.com/save/post 這樣的，我們這樣直接使用就會存在跨域的請求，導致接口請求不成功。
配置：
我們打開下面路徑的文件
config/index.js
在其中的 dev 對象里面找到： proxyTable: {}
這里就是配置代理的地方，我們進行如下設置：
module.exports = {
// ...
dev: {
// 代理配置表，在這里可以配置特定的請求代理到對應的API接口
proxyTable: {
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口，需要配置這個參數(shù)為true
changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置為true
}
},
}
}
接口地址原本是 /save/post ，但是為了匹配代理地址，在前面加一個 /api , 因此接口地址需要寫成這樣的即可生效 /api/save/post 。
即：前端本地啟動接口為：http://localhost:8080/api/save/post，轉發(fā)的代理接口為：http://www.xxx.com/api/save/post，其中的/api為匹配項。
/api 是本地路徑和后端接口路徑的匹配前綴，若后端接口給了/api這個前綴，可用上面的寫法。
若后端前綴不統(tǒng)一，則可繼續(xù)添加，寫法如下：
module.exports = {
// ...
dev: {
// 代理配置表，在這里可以配置特定的請求代理到對應的API接口
proxyTable: {
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口，需要配置這個參數(shù)為true
changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置為true
},
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口，需要配置這個參數(shù)為true
changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置為true
}
},
}
}
那么還有一種情況，是后端的接口沒有我們想要的匹配項（前綴）'/api',是直接的http://www.xxx.com/save/post，這樣的接口，我們就要用到pathRewrite來重寫地址，將本地路徑上的帶匹配前綴的路徑：http://localhost:8080/api/save/post上的前綴'/api'轉成 ‘ / '。以下第一種是網絡上大部分推薦的，但是我親測是無效的，估計他們多數(shù)用的上面的方法，沒有實際使用下面的方法，LZ用以下第一種方法折騰了2天無果，后去看了webpack-dev-server的issue，無意義試通了接口，即下面第二種方法，當然也不排除第一種方法是我的版本問題而沒有效果，所以如果大家試了第一種方法有效就當我的方法沒說，如果無效，不妨試試我的第二種方法：
第一種方法（網上寫的方法）
module.exports = {
// ...
dev: {
// 代理配置表，在這里可以配置特定的請求代理到對應的API接口
proxyTable: {
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口，需要配置這個參數(shù)為true
changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置為true
pathRewrite: {
'^/api': '/'
}
}
},
}
}
第二種方法（親測有效的方法）
module.exports = {
// ...
dev: {
// 代理配置表，在這里可以配置特定的請求代理到對應的API接口
proxyTable: {
'/api/*':{
target: "http://XXX.XXX.com",
changeOrigin: true,
pathRewrite: {'/api':'/'}
}
},
}
}
即將上面的匹配項從 ‘/api' 改成了 '/api/*',至于為什么，我表示也沒有搞明白，不過確實調通了代理，希望對大家有幫助
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文給大家分享一段使用原生Javascript實現(xiàn)的仿京東淘寶豎排二級導航的代碼，非常的實用，有需要的小伙伴參考下2014-12-12
全選與全不選在管理界面還是比較實用的，下面通過checkAll與clearAll兩個函數(shù)來輕松實現(xiàn)，感興趣的朋友不要錯過2013-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)返回頂部按鈕案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JS中的算法與數(shù)據(jù)結構之棧(Stack)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之棧(Stack),結合實例形式詳細分析了js中棧的概念、原理、定義及常見使用方法,需要的朋友可以參考下2019-08-08
JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作示例
這篇文章主要介紹了JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作,涉及javascript頁面元素動態(tài)添加及事件響應相關操作技巧,需要的朋友可以參考下2018-03-03
關于window.pageYOffset和document.documentElement.scrollTop
window.pageYOffset：Netscape屬性，指的是滾動條頂部到網頁頂部的距離2011-04-04
Javascript學習筆記:錯誤處理.2009-07-07
這篇文章主要介紹了JavaScript ES 模塊的使用，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
釘釘小程序web-view內嵌H5頁面并實現(xiàn)通信
本文主要介紹了釘釘小程序web-view內嵌H5頁面并實現(xiàn)通信，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
在Web開發(fā)中通過使用JavaScript可以動態(tài)地修改HTML元素的屬性和樣式,下面這篇文章主要給大家介紹了關于JS動態(tài)更改div高度實現(xiàn)的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-11-11