Nginx代理Vue項(xiàng)目出現(xiàn)Invalid Host header問題及解決
更新時(shí)間：2024年12月14日 09:58:03 作者：天航星
在使用Nginx的upstream對(duì)Vue項(xiàng)目進(jìn)行負(fù)載均衡時(shí),如果代理地址無法訪問目標(biāo)地址且頁面報(bào)錯(cuò)InvalidHostheader（無效主機(jī)頭）,可能是由于Vue項(xiàng)目的主機(jī)檢查配置導(dǎo)致的,解決方法是在Vue項(xiàng)目的webpack.dev.js文件中的devServer下添加disableHostCheck:true,跳過主機(jī)檢查
說明
使用 Nginx 的 upstream 對(duì) Vue 項(xiàng)目做負(fù)載均衡時(shí)，代理的地址無法訪問目標(biāo)地址
且頁面報(bào)錯(cuò)：
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)目時(shí)就不會(huì)進(jìn)行主機(jī)檢查。 - 重啟項(xiàng)目。
再次訪問就能代理到目標(biāo)地址了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
nginx反向代理下的長(zhǎng)連接實(shí)現(xiàn)
本文主要介紹了Nginx反向代理下的長(zhǎng)連接實(shí)現(xiàn),包括客戶端到Nginx和Nginx到后端服務(wù)器之間的長(zhǎng)連接設(shè)置,具有一定的參考價(jià)值,感興趣的可以了解一下2024-11-11
nginx配置訪問圖片路徑以及html靜態(tài)頁面的調(diào)取方法
這篇文章主要介紹了詳解nginx配置訪問圖片路徑以及html靜態(tài)頁面的調(diào)取方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。2016-12-12
nginx報(bào)錯(cuò)connect() failed(111: Connection refus
本文主要介紹了nginx報(bào)錯(cuò)connect() failed(111: Connection refused)while connecting to upstream解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
使用Nginx部署前端Vue項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了使用Nginx部署前端Vue項(xiàng)目的實(shí)現(xiàn),通過將這兩者結(jié)合起來,我們可以高效地托管我們的前端應(yīng)用,下面就一起來介紹一下,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了解決Nginx端口沖突的排查方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
nginx服務(wù)器中access_log日志分析與配置詳解
通過訪問日志，可以知曉用戶的地址，網(wǎng)站的哪些部分最受歡迎，用戶的瀏覽時(shí)間，對(duì)大多數(shù)用戶用的的瀏覽器做出針對(duì)性優(yōu)化。下面這篇文章主要給大家介紹了關(guān)于nginx服務(wù)器中access_log日志分析與配置的相關(guān)資料，需要的朋友可以參考下。2017-12-12
使用Nginx作為Web緩存服務(wù)器,能有效減少數(shù)據(jù)傳輸、節(jié)省網(wǎng)絡(luò)流量、加快響應(yīng)速度、減輕服務(wù)器壓力、提高服務(wù)端可用性,本文就來介紹一下nginx配置文件不使用緩存的方法,感興趣的可以了解一下2024-11-11
詳解Nginx之Location配置(Location匹配順序)
這篇文章主要介紹了詳解Nginx之Location配置(Location匹配順序)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
基于Nginx的服務(wù)器需要設(shè)置下重定向，下面的b2c就是相對(duì)應(yīng)的目錄，需要的朋友可以參考下。2010-07-07
將樹莓派轉(zhuǎn)身為強(qiáng)大的Web服務(wù)器如何使用Nginx和cpolar實(shí)現(xiàn)遠(yuǎn)程訪問
這篇文章主要介紹了Nginx可視化管理工具結(jié)合cpolar實(shí)現(xiàn)遠(yuǎn)程訪問內(nèi)網(wǎng)服務(wù),相比其他 Web 服務(wù)器，Nginx 的內(nèi)存占用率非常低，可以在樹莓派等資源受限的設(shè)備上運(yùn)行，同時(shí)結(jié)合cpolar 內(nèi)網(wǎng)穿透工具即可實(shí)現(xiàn)遠(yuǎn)程訪問，需要的朋友可以參考下2023-09-09