webpack中的代理配置詳解
作用：
1.解決開發(fā)環(huán)境跨域問題（不用再去配置nginx和host）
2.如果你有單獨(dú)的后端開發(fā)服務(wù)器API，并希望在同域名下發(fā)送API請(qǐng)求，那么代理某些URL會(huì)很有用
下面介紹一下五種經(jīng)常使用的場(chǎng)景
使用場(chǎng)景一：
請(qǐng)求到 /api/xxx 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/api/xxx, 例如 /api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/api/user
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
使用場(chǎng)景二
多個(gè)前綴的路徑，都用一個(gè)路徑來代理，使用context屬性
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
使用場(chǎng)景三
將url中的 /api替換為空串：
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
請(qǐng)求到 /api/xxx 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/xxx, 例如 /api/user 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:3000/user
使用場(chǎng)景四：
如果想要支持https，需要配置。默認(rèn)情況下，不接受運(yùn)行在 HTTPS（超文本傳輸安全協(xié)議） 上，且使用了無效證書的后端服務(wù)器。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false//是否驗(yàn)證SSL Certs
}
}
}
};
使用場(chǎng)景五：
個(gè)人理解：如果想要請(qǐng)求靜態(tài)html頁面，繞過代理；對(duì)于api請(qǐng)求則保持代理
有時(shí)你不想代理所有的請(qǐng)求?？梢曰谝粋€(gè)函數(shù)的返回值繞過代理。
在函數(shù)中你可以訪問請(qǐng)求體、響應(yīng)體和代理選項(xiàng)。必須返回 false 或路徑，來跳過代理請(qǐng)求。
例如：對(duì)于瀏覽器請(qǐng)求，你想要提供一個(gè) HTML 頁面，但是對(duì)于 API 請(qǐng)求則保持代理。你可以這樣做：
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};
解決跨域原理
上面的參數(shù)列表中有一個(gè)changeOrigin參數(shù), 是一個(gè)布爾值, 設(shè)置為true, 本地就會(huì)虛擬一個(gè)服務(wù)器接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求,
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};
vue-cli中proxyTable配置接口地址代理示例
個(gè)人理解：這個(gè)配置文件會(huì)生成一個(gè)代理服務(wù)器，用于連接前端請(qǐng)求，向后端api服務(wù)器發(fā)送請(qǐng)求
修改 config/index.js
module.exports = {
dev: {
// 靜態(tài)資源文件夾
assetsSubDirectory: 'static',
// 發(fā)布路徑
assetsPublicPath: '/',
// 代理配置表，在這里可以配置特定的請(qǐng)求代理到對(duì)應(yīng)的API接口
// 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
// 例如將'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
'/api': {
target: 'https://wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
},
// 例如將'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
'/img': {
target: 'https://cdn.wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
pathRewrite: {'^/img': ''} // pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'。
}
},
// Various Dev Server settings
//可以在process.env.HOST中重寫
host: 'localhost', // can be overwritten by process.env.HOST
//可以用process.env.PORT重寫，如果接口被占用，會(huì)分配一個(gè)其他端口
port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}
更多參數(shù)
dev-server 使用了非常強(qiáng)大的 http-proxy-middleware , http-proxy-middleware 基于 http-proxy 實(shí)現(xiàn)的，可以查看 http-proxy 的源碼和文檔:https://github.com/nodejitsu/node-http-proxy 。
target：要使用url模塊解析的url字符串
forward：要使用url模塊解析的url字符串
agent：要傳遞給http（s）.request的對(duì)象（請(qǐng)參閱Node的https代理和http代理對(duì)象）
ssl：要傳遞給https.createServer（）的對(duì)象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward標(biāo)頭
secure：true / false，是否驗(yàn)證SSL Certs
toProxy：true / false，傳遞絕對(duì)URL作為路徑（對(duì)代理代理很有用）
prependPath：true / false，默認(rèn)值：true - 指定是否要將目標(biāo)的路徑添加到代理路徑
ignorePath：true / false，默認(rèn)值：false - 指定是否要忽略傳入請(qǐng)求的代理路徑（注意：如果需要，您必須附加/手動(dòng)）。
localAddress：要為傳出連接綁定的本地接口字符串
changeOrigin：true / false，默認(rèn)值：false - 將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)URL
到此這篇關(guān)于webpack中的代理配置詳解的文章就介紹到這了,更多相關(guān)webpack 代理配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁面的input值
這篇文章主要給大家介紹了關(guān)于如何利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁面的input值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript變量作用域使用中常見錯(cuò)誤總結(jié)
剛看了一篇文章對(duì)js作用域的理解又會(huì)上升到一個(gè)新的臺(tái)階，javascript里變量作用域是個(gè)經(jīng)常讓人頭痛抓狂的問題,接下來對(duì)經(jīng)常遇到又容易出錯(cuò)的情況進(jìn)行了簡單總結(jié)，感興趣的各位可以參考下哈2013-03-03
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個(gè)元素全屏顯示，就像在網(wǎng)頁上看視頻的時(shí)候，可以全屏觀看一樣，該怎么實(shí)現(xiàn)呢2013-09-09
利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)
這篇文章主要介紹了利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù),需要的朋友可以參考下2014-02-02
代碼整體結(jié)構(gòu)是執(zhí)行速度的決定因素之一，代碼量少不一定運(yùn)行速度快，代碼量多也不一定運(yùn)行速度慢。本篇文章將對(duì)js的算法和流程控制進(jìn)行介紹，下面跟著小編一起來看下吧2016-12-12
微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法
這篇文章主要介紹了微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
終于解決了IE8不支持?jǐn)?shù)組的indexOf方法
今天，測(cè)試報(bào)過來一個(gè)js bug, 在IE8下有個(gè)js錯(cuò)誤，但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來調(diào)試發(fā)現(xiàn)原因是在IE8下，js數(shù)組沒有indexOf方法。2013-04-04
js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問題，具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
微信小程序身份證驗(yàn)證方法實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序身份證驗(yàn)證方法實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06