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