vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問(wèn)題
vue項(xiàng)目遇錯(cuò):Invalid Host header
現(xiàn)象
在A服務(wù)器上使用npm run serve 啟動(dòng)項(xiàng)目，訪問(wèn)A服務(wù)器的地址，無(wú)錯(cuò)誤。
在B服務(wù)器上使用nginx代理到A服務(wù)器，訪問(wèn)B服務(wù)器的地址，遇錯(cuò)“Invalid Host header”。
解決辦法
在vue.config.js的devServer節(jié)點(diǎn)下加入disableHostCheck: true配置項(xiàng)。
vue-cli4.x項(xiàng)目啟動(dòng)本地出現(xiàn) invalid host header的原因
近段時(shí)間有個(gè)項(xiàng)目是單點(diǎn)登錄的，項(xiàng)目里需要獲取用戶(hù)token，故本地配置host文件來(lái)訪問(wèn)線上項(xiàng)目，拿到cookie存儲(chǔ)的用戶(hù)token，所以配置了hosts文件。
之前用過(guò)vue-cli2.x,我們只需要配飾hosts文件就可以了。
因?yàn)閣ebpack是默認(rèn)設(shè)置可配置host，但是新版的vue-cli4.x將這項(xiàng)配置獨(dú)立出來(lái)，需要我們手動(dòng)配置，其實(shí)也很簡(jiǎn)單，只需在vue.config.js文件中添加一個(gè)屬性并設(shè)置值為true
module.exports ={
devServer: {
// 本地配置host生效
disableHostCheck:true,
},
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue resource post請(qǐng)求時(shí)遇到的坑
這篇文章主要介紹了vue resource post請(qǐng)求時(shí)遇到的坑,需要的朋友可以參考下2017-10-10
vue3項(xiàng)目中各個(gè)文件的作用詳細(xì)介紹
在Vue3項(xiàng)目中,通常會(huì)有以下一些常見(jiàn)的目錄和文件,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中各個(gè)文件的作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式
這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vite項(xiàng)目的根目錄中的env.d.ts類(lèi)型聲明文件里要寫(xiě)什么
這篇文章主要介紹了vite項(xiàng)目的根目錄中的env.d.ts類(lèi)型聲明文件里要寫(xiě)什么,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了如何利用vue寫(xiě)一個(gè)日歷，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解
這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁(yè)面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這就是路由跳轉(zhuǎn)2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)字輸入框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue diff算法的使用，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08