来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241

vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Invalid Host header

经查是因为新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的就不能访问。这样有2中方法,一种是设置跳过host检查,一种是直接host设置成你的地址。

1、关闭host检查

可以在build目录下的webpack.dev.conf.js文件,devServer下添加disableHostCheck: true,跳过检查

同样的原理,可以在package.json文件修改scripts命令:webpack-dev-server --disableHostCheck=true

2、设置成你的host,加入你的host是xxx.com,同样2中方法,修改配置文件,和script命令

在config目录下修改index.js文件的host,这个默认是localhost,可修改成   xxx.com
package.json的script语句: webpack-dev-server --host=xxx.com或者--public=xxx.com

【转载】vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Invalid Host header的更多相关文章

  1. 【记录】解决uni-app 用nginx反向代理出现Invalid Host header问题

    之前解决过一次,后来给忘记了,今天又遇到这个问题,现记录一下 修改uni-app的manifest.json文件  - >源码视图 添加以下代码: "disableHostCheck& ...

  2. natapp 穿透访问 vue项目 Invalid Host header

    由于要近期开发微信小程序,所以今天了解了一下这个netapp 内网映射这个东西,所以一开始自己就在网上看,然后想把环境部署起来,参考https://natapp.cn/ ,看了一分钟教程以后,然后自己 ...

  3. 搭建windows环境下(nginx+mysql+php)开发环境

    搭建windows环境下(nginx+mysql+php)开发环境   1. 所需准备应用程序包        1.1 nginx 程序包nginx-1.0.4.zip或其他版本(下载地址: http ...

  4. @Vue/Cli 3 Invalid Host header 检测关闭

    Invalid Host header 在本地开发等一般情况下,无论是 local,还是 ip,或者是 0.0.0.0,在 cli 中都默认为合法的,但是有些场景可能会被不支持,比如远程开发,或者是云 ...

  5. Nginx 代理Vue项目出现Invalid Host header

    说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 ...

  6. 开发环境绑定host vue 返回 invalid host header

    事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...

  7. 解决 Vue 项目 invalid host header 问题(两种方案)

    问题出现背景 做微信H5网页时,使用花生壳内网穿透进行调试时,打开网页显示:invalid host header 分析问题 这句话的意思是:无效的Host请求头: 因为在vue在调试时相当于启动了一 ...

  8. 【Nginx】使用Nginx做反向代理时,关于被代理服务器相应的超时设置

    > 参考的优秀文章 Module ngx_http_proxy_module > 设置等待被代理服务器的最大响应时间 使用Nginx做反向代理时,因被代理服务器因业务确实复杂,需时较久,往 ...

  9. 用nginx做代理服务器上网

    用nginx做代理服务器上网 目前现状:只有1个机器能上网(web),其他机器不能方法:能上网的做一个代理web服务器中转,其他机器连接它即可.采用nginx Nginx配置如下: server{   ...

随机推荐

  1. go读写文本文件

    一.文件读取 1. 将整个文件读取到内存中 package main import ( "flag" "fmt" "io/ioutil" ) ...

  2. Python3学习笔记——异常处理

    #!/usr/bin/env python # 1.异常处理 try: # 主要执行的代码 except IndexError as e: # 对于某些错误需要特殊处理的,可以对特殊错误进行捕捉 pr ...

  3. PHP应该学什么,如何学好PHP

    http://blog.sina.com.cn/s/blog_76bdabf70101azl4.html(注:原文来自传智播客) 本文转自http://blog.sina.com.cn/s/blog_ ...

  4. 联想think system sr550信息

    带外管理口 默认IP地址:192.168.70.125 默认用户名密码 USERID PASSW0RD    0是数字0

  5. Codeforces 1101D 点分治

    题意:有一颗树,每个点有一个点权,边权都是1,问路径上的所有点的gcd不是1的最长路径是多少? 思路:之前补这道题的时候,用分解质因数 + 树形DP做的,其实用点分治可以更暴力一点.对于这类统计树上路 ...

  6. RabbitMQ学习第三记:发布/订阅模式(Publish/Subscribe)

    工作队列模式是直接在生产者与消费者里声明好一个队列,这种情况下消息只会对应同类型的消费者. 举个用户注册的列子:用户在注册完后一般都会发送消息通知用户注册成功(失败).如果在一个系统中,用户注册信息有 ...

  7. iview table绑定双击事件

    <Table <Table ref="table" highlight-row :columns="columns" :data="new ...

  8. iview table的render()函数的用法

    语法:render:(h,params)=>{} render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," ...

  9. 【leetcode】937. Reorder Log Files

    题目如下: You have an array of logs.  Each log is a space delimited string of words. For each log, the f ...

  10. Service系统服务(二):补充应用技巧、软连接与硬连接、man手册、zip备份、vim效率操作、自定义yum软件仓库、发布及测试yum仓库、编译安装软件包

    一.补充应用技巧 目标: 本例要求掌握在运维中比较常用的一些扩展命令技巧的使用,完成下列小技巧操作: 1> 采用数值形式将目录/root的权限调整为 rwx------   2> 将记录的 ...