🐱 个人主页:不叫猫先生,公众号:前端舵手 🙋♂️ 作者简介:CSDN博客专家、内容合伙人,2023新星计划导师,前端领域优质创作者,共同学习共同进步,一起加油呀
🐱 个人主页:不叫猫先生,公众号:前端舵手
🙋♂️ 作者简介:CSDN博客专家、内容合伙人,2023新星计划导师,前端领域优质创作者,共同学习共同进步,一起加油呀!
📢 资料领取:前端进阶资料可以找我免费领取
Invalid Host header
这个报错在网上有很多文章介绍解决办法,但是很多都没有没有用,这里为兄弟们排下坑,本文的解决方法已经验证没有问题,兄弟们可放心借鉴.
在yarn serve
项目启动成功,但是页面显示Invalid Host header
新版的webpack-dev-server
出于安全考虑会默认检查hostname
,用于防止不受信任的主机访问DevServer
,当浏览器发出请求时,它会会检查请求中的主机头,若hostname
没有配置在内,则中断访问。
设置allowedHosts
,这个选项是设置允许访问开发服务器的主机列表。将其设置为 all
表示允许任何主机访问开发服务器。这个选项与主机检查相关,但它更精确地控制哪些主机可以访问开发服务器,而不是完全禁用主机检查。也可以设置多个主机。具体查看官方文档allowedHosts官方介绍
allowedHosts: "all"
allowedHosts: ['xxx.com','xxx.com']
具体解决如下:
const { defineConfig } = require('@Vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer: { host: 'localhost', port: 8089, historyapiFallback: true, allowedHosts: "all" }})
在vue-cli版本为2.x的情况下该设置生效,disableHostCheck
允许在开发服务器中禁用主机检查。默认情况下,WEBpack DevServer
会检查请求的主机是否与配置中的主机匹配,以增加安全性。如果配置中没有明确指定主机(host),Webpack DevServer将只允许本地主机访问,以防止潜在的安全风险。通过将 disableHostCheck 设置为 true,可以允许来自其他主机的请求,但这可能会增加潜在的安全风险,因此谨慎使用。
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, disableHostCheck:true, devServer: { host: 'localhost', port: 8089 }})
如果vue-cli版本为3.x使用的时候会报下面的错误:
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'disableHostCheck'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, Http2?, https?, ipc?, liveReload?, magichtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, websocketServer? }
所以需要看清自己的版本。
上面代码其中historyApiFallback
用于在使用 Vue Router
或类似的前端路由库时,处理路由切换时的页面刷新问题。当你使用浏览器的前进和后退按钮或手动输入URL
时,Vue Router
或其他路由库会在前端进行路由切换,但如果没有合适的配置,刷新页面时会导致404错误。
historyApiFallback:true
transpileDependencies
用于配置需要通过 Babel 转译的依赖模块。默认情况下(false),Vue CLI
和 Babel
只会转译应用程序代码,而不会转译依赖模块(node_modules
)中的代码。但有些依赖模块可能包含 es6+ 语法,如果你需要转译这些依赖模块,可以使用 transpileDependencies
进行配置。但是transpileDependencies: true
只会广度遍历编译三方依赖,对于依赖的依赖则不会处理。
transpileDependencies:true
transpileDependencies:['xxxx']//制定特定的依赖进行转译
lintOnSave
用于控制在开发和保存文件时是否执行 ESLint
静态代码检查。ESLint
可以帮助你捕获潜在的代码问题和风格违规。
如果将 lintOnSave
设置为 true
,则在保存文件时,Vue CLI
会自动运行 ESLint
检查,如果发现问题,将会在开发过程中报告错误和警告。
如果将 lintOnSave
设置为 false
,则禁用了自动的 ESLint
检查,你需要手动运行检查。
来源地址:https://blog.csdn.net/qq_38951259/article/details/133314354
--结束END--
本文标题: 【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
本文链接: https://www.lsjlt.com/news/427093.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-23
2024-05-22
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-13
2024-05-13
2024-05-11
2024-05-11
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0