Nginx代理Vue項(xiàng)目出現(xiàn)Invalid Host header問(wèn)題及解決
更新時(shí)間：2024年12月14日 09:58:03 作者：天航星
在使用Nginx的upstream對(duì)Vue項(xiàng)目進(jìn)行負(fù)載均衡時(shí),如果代理地址無(wú)法訪(fǎng)問(wèn)目標(biāo)地址且頁(yè)面報(bào)錯(cuò)InvalidHostheader（無(wú)效主機(jī)頭）,可能是由于Vue項(xiàng)目的主機(jī)檢查配置導(dǎo)致的,解決方法是在Vue項(xiàng)目的webpack.dev.js文件中的devServer下添加disableHostCheck:true,跳過(guò)主機(jī)檢查
說(shuō)明
使用 Nginx 的 upstream 對(duì) Vue 項(xiàng)目做負(fù)載均衡時(shí)，代理的地址無(wú)法訪(fǎng)問(wèn)目標(biāo)地址
且頁(yè)面報(bào)錯(cuò)：
Invalid Host header（無(wú)效主機(jī)頭）
分析
檢查 Nginx 的 nginx.conf 配置，如下：
upstream sail{
server 127.0.0.1:8080;
}
server {
listen 8081;
server_name localhost;
location / {
root html;
index index.html index.htm;
proxy_pass http://sail;
}
}反復(fù)檢查后沒(méi)有問(wèn)題，排除了 Nginx 層面的問(wèn)題。
那只能是 Vue 項(xiàng)目配置的問(wèn)題了，最后發(fā)現(xiàn)是由于 Vue 的主機(jī)檢查配置導(dǎo)致的。
解決
- 找到 Vue 項(xiàng)目中的 build 目錄下的 webpack.dev.js 文件。
- 在 devServer 下添加
disableHostCheck: true，即跳過(guò)檢查，如此訪(fǎng)問(wèn) Vue 項(xiàng)目時(shí)就不會(huì)進(jìn)行主機(jī)檢查。 - 重啟項(xiàng)目。
再次訪(fǎng)問(wèn)就能代理到目標(biāo)地址了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx幾種負(fù)載均衡模式的實(shí)現(xiàn)示例
本文主要介紹了Nginx幾種負(fù)載均衡模式的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-10-10
這篇文章主要為大家詳細(xì)介紹了在前端項(xiàng)目開(kāi)發(fā)中如何配置Nginx,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-09-09
nginx中proxy_set_header參數(shù)的實(shí)現(xiàn)
本文詳細(xì)介紹了Nginx中proxy_set_header指令的用法,通過(guò)設(shè)置不同的請(qǐng)求頭信息,可以實(shí)現(xiàn)更靈活的反向代理功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12
這篇文章主要給大家介紹了關(guān)于Nginx反向代理配置的相關(guān)資料,nginx作為web服務(wù)器一個(gè)重要的功能就是反向代理,當(dāng)然你也可以使用nginx配置正向代理,需要的朋友可以參考下2021-06-06
nginx請(qǐng)求時(shí)找路徑問(wèn)題解決
當(dāng)你安裝了nginx的時(shí)候,為nginx配置了如下的location,想要去訪(fǎng)問(wèn)路徑下面的內(nèi)容,可是總是出現(xiàn)404,找不到文件,這是什么原因呢,今天我們就來(lái)解決這個(gè)問(wèn)題,感興趣的朋友一起看看吧2023-10-10
今天小編就為大家分享一篇關(guān)于nginx proxy_cache批量清除緩存的腳本介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
這篇文章主要介紹了基于Nginx的Mencached緩存配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Nginx實(shí)現(xiàn)動(dòng)態(tài)攔截非法訪(fǎng)問(wèn)ip的方法
最近在訪(fǎng)問(wèn)時(shí)不時(shí)會(huì)被暴力刷量,爬蟲(chóng)和惡意攻擊導(dǎo)致數(shù)據(jù)庫(kù),服務(wù)等癱瘓,所以本文介紹了在Nginx上實(shí)現(xiàn)一個(gè)動(dòng)態(tài)攔截IP的方法,具體是當(dāng)某個(gè)IP在1分鐘內(nèi)訪(fǎng)問(wèn)超過(guò)60次時(shí),將其加入Redis并攔截,攔截時(shí)間默認(rèn)1天,需要的朋友可以參考下2025-02-02
Nginx+keepalived配置的實(shí)現(xiàn)步驟
本文主要介紹了Nginx+keepalived配置的實(shí)現(xiàn)步驟,實(shí)現(xiàn)配置Nginx和keepalived、編寫(xiě)腳本以及測(cè)試配置,具有一定的參考價(jià)值,感興趣的可以了解一下2025-05-05
Nginx禁用TLSv1.0?1.1改為T(mén)LSv1.2?1.3的操作方法
使用Mozilla?SSL配置工具生成配置,修改nginx.conf的ssl_protocols和ssl_ciphers,通過(guò)ssllabs檢測(cè)及Linux命令測(cè)試TLS版本支持情況,確保網(wǎng)站SSL安全配置生效,本文給大家介紹Nginx禁用TLSv1.0?1.1改為T(mén)LSv1.2?1.3的操作方法,需要的朋友一起看看吧2025-08-08