為什麼要寫篇文章

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

為什麼要用代理

跨域

在開發過程中,我們的開發環境一般都是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這個外掛完成的,有興趣的話可以去搜一下,在這裡我就不多做解釋了.

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。