?? 個(gè)人主頁(yè)：不叫貓先生，公眾號(hào)：前端舵手
???♂? 作者簡(jiǎn)介：CSDN博客專家、內(nèi)容合伙人，2023新星計(jì)劃導(dǎo)師，前端領(lǐng)域優(yōu)質(zhì)創(chuàng)作者，共同學(xué)習(xí)共同進(jìn)步，一起加油呀！
?? 資料領(lǐng)取：前端進(jìn)階資料可以找我免費(fèi)領(lǐng)取
Invalid Host header這個(gè)報(bào)錯(cuò)在網(wǎng)上有很多文章介紹解決辦法，但是很多都沒(méi)有沒(méi)有用，這里為兄弟們排下坑，本文的解決方法已經(jīng)驗(yàn)證沒(méi)有問(wèn)題，兄弟們可放心借鑒.
一、報(bào)錯(cuò)現(xiàn)象
在yarn serve 項(xiàng)目啟動(dòng)成功，但是頁(yè)面顯示Invalid Host header
二、報(bào)錯(cuò)原因分析
新版的webpack-dev-server出于安全考慮會(huì)默認(rèn)檢查hostname，用于防止不受信任的主機(jī)訪問(wèn)DevServer，當(dāng)瀏覽器發(fā)出請(qǐng)求時(shí)，它會(huì)會(huì)檢查請(qǐng)求中的主機(jī)頭，若hostname 沒(méi)有配置在內(nèi)，則中斷訪問(wèn)。
三、項(xiàng)目環(huán)境
Vue3：3.0.0
Npm：6.14.17
Node：16.13.0
四、解決方案
1、allowedHosts
設(shè)置allowedHosts，這個(gè)選項(xiàng)是設(shè)置允許訪問(wèn)開(kāi)發(fā)服務(wù)器的主機(jī)列表。將其設(shè)置為 all 表示允許任何主機(jī)訪問(wèn)開(kāi)發(fā)服務(wù)器。這個(gè)選項(xiàng)與主機(jī)檢查相關(guān)，但它更精確地控制哪些主機(jī)可以訪問(wèn)開(kāi)發(fā)服務(wù)器，而不是完全禁用主機(jī)檢查。也可以設(shè)置多個(gè)主機(jī)。具體查看官方文檔allowedHosts官方介紹
- 設(shè)置所有主機(jī)列表
allowedHosts: "all"
- 設(shè)置部分主機(jī)列表
allowedHosts: ['xxx.com','xxx.com']
具體解決如下：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
devServer: {
host: 'localhost',
port: 8089,
historyApiFallback: true,
allowedHosts: "all"
}
})
2、disableHostCheck
在vue-cli版本為2.x的情況下該設(shè)置生效，disableHostCheck允許在開(kāi)發(fā)服務(wù)器中禁用主機(jī)檢查。默認(rèn)情況下，Webpack DevServer會(huì)檢查請(qǐng)求的主機(jī)是否與配置中的主機(jī)匹配，以增加安全性。如果配置中沒(méi)有明確指定主機(jī)（host），Webpack DevServer將只允許本地主機(jī)訪問(wèn)，以防止?jié)撛诘陌踩L(fēng)險(xiǎn)。通過(guò)將 disableHostCheck 設(shè)置為 true，可以允許來(lái)自其他主機(jī)的請(qǐng)求，但這可能會(huì)增加潛在的安全風(fēng)險(xiǎn)，因此謹(jǐn)慎使用。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
disableHostCheck:true,
devServer: {
host: 'localhost',
port: 8089
}
})
如果vue-cli版本為3.x使用的時(shí)候會(huì)報(bào)下面的錯(cuò)誤：
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'disableHostCheck'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
所以需要看清自己的版本。
五、拓展
1、historyApiFallback
上面代碼其中historyApiFallback用于在使用 Vue Router 或類似的前端路由庫(kù)時(shí)，處理路由切換時(shí)的頁(yè)面刷新問(wèn)題。當(dāng)你使用瀏覽器的前進(jìn)和后退按鈕或手動(dòng)輸入URL時(shí)，Vue Router或其他路由庫(kù)會(huì)在前端進(jìn)行路由切換，但如果沒(méi)有合適的配置，刷新頁(yè)面時(shí)會(huì)導(dǎo)致404錯(cuò)誤。
historyApiFallback:true
2、transpileDependencies
transpileDependencies用于配置需要通過(guò) Babel 轉(zhuǎn)譯的依賴模塊。默認(rèn)情況下（false），Vue CLI 和 Babel 只會(huì)轉(zhuǎn)譯應(yīng)用程序代碼，而不會(huì)轉(zhuǎn)譯依賴模塊（node_modules）中的代碼。但有些依賴模塊可能包含 ES6+ 語(yǔ)法，如果你需要轉(zhuǎn)譯這些依賴模塊，可以使用 transpileDependencies 進(jìn)行配置。但是transpileDependencies: true 只會(huì)廣度遍歷編譯三方依賴，對(duì)于依賴的依賴則不會(huì)處理。
transpileDependencies:true
transpileDependencies:['xxxx']//制定特定的依賴進(jìn)行轉(zhuǎn)譯
3、lintOnSave
lintOnSave 用于控制在開(kāi)發(fā)和保存文件時(shí)是否執(zhí)行 ESLint 靜態(tài)代碼檢查。ESLint 可以幫助你捕獲潛在的代碼問(wèn)題和風(fēng)格違規(guī)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-712837.html
如果將 lintOnSave 設(shè)置為 true，則在保存文件時(shí)，Vue CLI 會(huì)自動(dòng)運(yùn)行 ESLint 檢查，如果發(fā)現(xiàn)問(wèn)題，將會(huì)在開(kāi)發(fā)過(guò)程中報(bào)告錯(cuò)誤和警告。
如果將 lintOnSave 設(shè)置為 false，則禁用了自動(dòng)的 ESLint 檢查，你需要手動(dòng)運(yùn)行檢查。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-712837.html
到了這里，關(guān)于【已解決】多種方式最新解決Invalid Host header(無(wú)效的主機(jī)頭)服務(wù)器域名訪問(wèn)出現(xiàn)的錯(cuò)誤的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
