webpack proxy 使用（代理的使用）

爲何要寫篇文章

這兩天的開發中遇到一些須要代理才能解決的問題, 在這裏記錄一下, 方便之後的查閱.

爲何要用代理

• 跨域

在開發過程當中, 咱們的開發環境通常都是http:// localhost, 可是若是須要請求的數據不在本地, 那麼咱們就須要面對一個跨域請求的問題. 衆所周知, 由於瀏覽器的安全協議, 咱們是沒法直接進行跨域請求的. 代理就是爲了解決這個問題, 固然了你也可使用jsonp 和 nginx 反向代理.

如何進行代理

• webpack 配置

在這裏我默認爲開發環境的配置

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

proxy: {
    '/index':{ // 這個是你要替換的位置
    
    /** 好比你要講http://localhost:8080/index/xxx 替換成 http://10.20.30.120:8080/sth/xxx * 那麼就須要將 index 前面的值替換掉, 或者說是替換掉根地址, *你可能發現了index也是須要替換的, 沒錯, 我會在後續操做中處理. */
    
    target: 'http://10.20.30.120:8080'//這個是被替換的目標地址
    
    changeOrigin: true // 默認是false,若是須要代理須要改爲true
    
    pathRewrite:{
        '^/index' : '/' //在這裏 http://localhost:8080/index/xxx 已經被替換成 http://10.20.30.120:8080/
    }}
}

// 而後在你發起請求的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這個插件完成的, 有興趣的話能夠去搜一下,在這裏我就很少作解釋了.

若是以爲有用的話,點個贊再走,謝謝!