最近在接到一個需求是做一個可視化的監控系統，mock數據來開發的話實在不太方便，況且數據量之大。查了一下資料，可以用webpack-dev-server作為代理，直接請求線上，哈哈哈，是不是很方便。
### 目前我用的是webpack 4.41.2。具體步驟如下：
1、首先你需要配置host，我用的是SwitchHost

127.0.0.1 localhost xhm.tb.com

2、在webpack devServer配置如下

const packobjPLus={url:'http://play.m.tb.com/',api:['/user']} devServer: {host: 'xhm.tb.com', //主機地址,這個和第一步SwitchHost 配置的域名是一樣的。proxy: [{target: packobjPLus.url,changeOrigin: true,// secure:true,bypass: function (req, res, proxyOptions) {let url = packobjPLus.url;req.headers['origin'] = url;req.headers['host'] = url;req.headers['referer'] = url;},},],} 當頁面請求 /user/XX 會被代理到 http://play.m.tb.com/user/XX
是不是很簡單呢

### 配置中主要的參數說明
1、target:代理的API,就是需要跨域的API地址
2、changeOrigin：主要解決跨域，是一個布爾值，設置為true，本地會虛擬一個服務器，接受你的請求并帶你發送該請求
3、secure：默認情況下如果請求的服務是https的，并且證書是未認證的的，則該錯未認證證書默認是無法使用的。如果想要使用該證書。則需要進行如下配置，關閉安全檢測
4、bypass：有時，不希望代理所有請求，可以像bypass屬性傳遞一個function來實現該需求。
在function中，可以獲取到request，response以及proxy options。
參考文檔： https://github.com/webpack/docs/wiki/webpack-dev-server#bypass-the-proxy

總結

以上是生活随笔為你收集整理的js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域，让你的本地开发飞起来...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。