快捷導(dǎo)航

webpack proxy 使用(代理的使用)

更新時間：2020年01月10日 16:02:09 作者：酒武侯

這篇文章主要介紹了webpack proxy 使用(代理的使用)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

為什么要寫篇文章

這兩天的開發(fā)中遇到一些需要代理才能解決的問題, 在這里記錄一下, 方便以后的查閱.

為什么要用代理

跨域

在開發(fā)過程中, 我們的開發(fā)環(huán)境一般都是http:// localhost, 但是如果需要請求的數(shù)據(jù)不在本地, 那么我們就需要面對一個跨域請求的問題. 眾所周知, 因為瀏覽器的安全協(xié)議, 我們是無法直接進(jìn)行跨域請求的. 代理就是為了解決這個問題, 當(dāng)然了你也可以使用jsonp 和 nginx 反向代理.

如何進(jìn)行代理

webpack 配置

在這里我默認(rèn)為開發(fā)環(huán)境的配置

找到 webpack.config.js 文件
在 devServer 對象下面加入以下代碼

proxy: {
  '/index':{ // 這個是你要替換的位置
  
  /** 比如你要講http://localhost:8080/index/xxx 替換成 http://10.20.30.120:8080/sth/xxx
  * 那么就需要將 index 前面的值替換掉, 或者說是替換掉根地址, 
  *你可能發(fā)現(xiàn)了index也是需要替換的, 沒錯, 我會在后續(xù)操作中處理.
  */
  
  target: 'http://10.20.30.120:8080'//這個是被替換的目標(biāo)地址
  
  changeOrigin: true // 默認(rèn)是false,如果需要代理需要改成true
  
  pathRewrite:{
    '^/index' : '/' //在這里 http://localhost:8080/index/xxx 已經(jīng)被替換成 http://10.20.30.120:8080/
  }}
}

// 然后在你發(fā)起請求的js文件中的地址需要忽略http://10.20.30.120:8080/

//比如 demo.js
axios.post({
  url:'http://10.20.30.120:8080/sth/xxx'// 需要替換成下面的地址
  url:'/sth/xxx'
}
)

原理

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: