webpackproxy怎么使用

這篇文章主要為大家展示了“webpackproxy怎么使用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“webpackproxy怎么使用”這篇文章吧。

為什么要用代理

跨域

在開發(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)境的配置

1. 找到 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.jsaxios.post({  url:'http://10.20.30.120:8080/sth/xxx'// 需要替換成下面的地址  url:'/sth/xxx'})

原理

實(shí)際上代理是使用了是利用http-proxy-middleware這個(gè)插件完成的, 有興趣的話可以去搜一下,在這里我就不多做解釋了.

以上是“webpackproxy怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！