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