最近在接到一個(gè)需求是做一個(gè)可視化的監(jiān)控系統(tǒng)，mock數(shù)據(jù)來開發(fā)的話實(shí)在不太方便，況且數(shù)據(jù)量之大。查了一下資料，可以用webpack-dev-server作為代理，直接請(qǐng)求線上，哈哈哈，是不是很方便。
### 目前我用的是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', //主機(jī)地址,這個(gè)和第一步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;},},],} 當(dāng)頁面請(qǐng)求 /user/XX 會(huì)被代理到 http://play.m.tb.com/user/XX
是不是很簡(jiǎn)單呢

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。