Nginx 代理Vue项目出现Invalid Host header
说明
使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错:
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;
}
}
反复检查后没有问题,排除了 Nginx 层面的问题。
那只能是 Vue 项目配置的问题了,最后发现是由于 Vue 的主机检查配置导致的。
解决
- 找到 Vue 项目中的 build 目录下的 webpack.dev.js 文件。
- 在 devServer 下添加
disableHostCheck: true
,即跳过检查,如此访问 Vue 项目时就不会进行主机检查。 - 重启项目。
再次访问就能代理到目标地址了。
Nginx 代理Vue项目出现Invalid Host header的更多相关文章
- @Vue/Cli 3 Invalid Host header 检测关闭
Invalid Host header 在本地开发等一般情况下,无论是 local,还是 ip,或者是 0.0.0.0,在 cli 中都默认为合法的,但是有些场景可能会被不支持,比如远程开发,或者是云 ...
- nginx代理vue项目
很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github ...
- 【记录】解决uni-app 用nginx反向代理出现Invalid Host header问题
之前解决过一次,后来给忘记了,今天又遇到这个问题,现记录一下 修改uni-app的manifest.json文件 - >源码视图 添加以下代码: "disableHostCheck& ...
- 内网穿透访问Vue项目的时候出现Invalid Host header解决办法
适用场景: 在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具:natapp Inval ...
- 解决 Vue 项目 invalid host header 问题(两种方案)
问题出现背景 做微信H5网页时,使用花生壳内网穿透进行调试时,打开网页显示:invalid host header 分析问题 这句话的意思是:无效的Host请求头: 因为在vue在调试时相当于启动了一 ...
- natapp 穿透访问 vue项目 Invalid Host header
由于要近期开发微信小程序,所以今天了解了一下这个netapp 内网映射这个东西,所以一开始自己就在网上看,然后想把环境部署起来,参考https://natapp.cn/ ,看了一分钟教程以后,然后自己 ...
- 手机配置代理报错invalid host header
手机配置代理后浏手机弹出页面报错invalid host header,因为我是用fiddler配置的,所以这时候就要看下自己配置完之后,是否重启,重启之后就没问题了. fiddle配置参考:http ...
- 项目在服务器部署后打开出现Invalid Host header
一.问题描述在服务器部署启动了项目,页面显示Invalid Host header. 二.问题分析新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname ...
- 开发环境绑定host vue 返回 invalid host header
事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...
随机推荐
- 人脸识别库 face_recognition
face_recognition Windows系统环境下安装 默认环境:anaconda的python3.7版本,win10环境 第一步:安装dlib 从网络上下载: http://dlib.net ...
- atcoder abc 244
atcoder abc 244 D - swap hats 给定两个 R,G,B 的排列 进行刚好 \(10^{18}\) 次操作,每一次选择两个交换 问最后能否相同 刚好 \(10^{18}\) 次 ...
- camunda开源流程引擎的数据库表结构介绍
Camunda bpm流程引擎的数据库由多个表组成,表名都以ACT开头,第二部分是说明表用途的两字符标识.本文以Camunda7.11版本为例,共47张表. ACT_RE_*: 'RE'表示流程资源存 ...
- 关于vue cli 使用iview 自定义主题遇到的坑
定制主题,这里讲变量覆盖 当你老老实实的把上面文档中的代码一一复制粘贴到项目文件中时,发现了还没装less,所以你就 npm install less –savenpm install less-lo ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- SAP OOALV- 合计
TYPES: BEGIN OF ty_mara, srno LIKE adrc-name1, " Storing the total text matnr LIKE mara-matnr, ...
- SAP Html viewer
1 *&---------------------------------------------------------------------* 2 *& Report RSDEM ...
- vue.js中英文api
全局配置 Vue.config is an object containing Vue's global configurations. You can modify its properties l ...
- NC16462 [NOIP2015]跳石头
NC16462 [NOIP2015]跳石头 题目 题目描述 一年一度的"跳石头"比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块 ...
- NC204859 组队
NC204859 组队 题目 题目描述 你的团队中有 \(n\) 个人,每个人有一个能力值 \(a_i\),现在需要选择若干个人组成一个团队去参加比赛,由于比赛的规则限制,一个团队里面任意两个人能力的 ...