webpack proxy 使用(代理的使用)
更新時(shí)間：2020年01月10日 16:02:09 作者：酒武侯
這篇文章主要介紹了webpack proxy 使用(代理的使用)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
為什么要寫篇文章
這兩天的開發(fā)中遇到一些需要代理才能解決的問題, 在這里記錄一下, 方便以后的查閱.
為什么要用代理
跨域
在開發(fā)過程中, 我們的開發(fā)環(huán)境一般都是http:// localhost, 但是如果需要請(qǐng)求的數(shù)據(jù)不在本地, 那么我們就需要面對(duì)一個(gè)跨域請(qǐng)求的問題. 眾所周知, 因?yàn)闉g覽器的安全協(xié)議, 我們是無法直接進(jìn)行跨域請(qǐng)求的. 代理就是為了解決這個(gè)問題, 當(dāng)然了你也可以使用jsonp 和 nginx 反向代理.
如何進(jìn)行代理
webpack 配置
在這里我默認(rèn)為開發(fā)環(huán)境的配置
- 找到 webpack.config.js 文件
- 在 devServer 對(duì)象下面加入以下代碼
proxy: {
'/index':{ // 這個(gè)是你要替換的位置
/** 比如你要講http://localhost:8080/index/xxx 替換成 http://10.20.30.120:8080/sth/xxx
* 那么就需要將 index 前面的值替換掉, 或者說是替換掉根地址,
*你可能發(fā)現(xiàn)了index也是需要替換的, 沒錯(cuò), 我會(huì)在后續(xù)操作中處理.
*/
target: 'http://10.20.30.120:8080'//這個(gè)是被替換的目標(biāo)地址
changeOrigin: true // 默認(rèn)是false,如果需要代理需要改成true
pathRewrite:{
'^/index' : '/' //在這里 http://localhost:8080/index/xxx 已經(jīng)被替換成 http://10.20.30.120:8080/
}}
}
// 然后在你發(fā)起請(qǐng)求的js文件中的地址需要忽略http://10.20.30.120:8080/
//比如 demo.js
axios.post({
url:'http://10.20.30.120:8080/sth/xxx'// 需要替換成下面的地址
url:'/sth/xxx'
}
)
原理
實(shí)際上代理是使用了是利用http-proxy-middleware這個(gè)插件完成的, 有興趣的話可以去搜一下,在這里我就不多做解釋了.
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
layui.js實(shí)現(xiàn)的表單驗(yàn)證功能示例
這篇文章主要介紹了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于layui.js的事件監(jiān)聽、驗(yàn)證、判定等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
JavaScrip實(shí)現(xiàn)一個(gè)有時(shí)間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動(dòng)過期機(jī)制的時(shí)間限制緩存實(shí)現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過程中，這帶來的問題更為嚴(yán)重。2013-04-04
這篇文章主要介紹了利用JS來控制鍵盤的上下左右鍵示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JS驗(yàn)證input輸入框（字母，數(shù)字，符號(hào)，中文）
本文主要介紹了JS驗(yàn)證input輸入框（字母，數(shù)字，符號(hào)，中文）的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了jqGrid讀取選擇的多行的某個(gè)屬性實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-05-05
22種JavaScript中數(shù)組常用API總結(jié)
在前端開發(fā)中，數(shù)組是一種常見且重要的數(shù)據(jù)結(jié)構(gòu)，本文主要介紹了前端中數(shù)組常用的API，包括添加、刪除、截取、合并、轉(zhuǎn)換等操作，希望對(duì)大家有所幫助2023-05-05
這篇文章主要為大家介紹了前端必會(huì)的Webpack優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
簡單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在Google 地圖上實(shí)現(xiàn)做的標(biāo)記相連接
這篇文章主要介紹了在Google 地圖上實(shí)現(xiàn)做的標(biāo)記相連接,需要的朋友可以參考下2015-01-01