在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

本文介绍了一种有趣的现象:当表单内仅有一个输入框时,按下回车键会触发表单自动提交,导致页面跳转。文章详细解释了这一行为的原因,并提供了解决方案:通过重写keydown事件并阻止其默认行为。

前些时间在做一个搜索功能时发现一个比较有意思的现象,场景是这样的:在一个模态窗口中是一个订单列表,页面的顶部有若干个状态筛选框和一个搜索关键字输入框,当焦点在关键字输入框时按回车,本来是对inputkeyup事件做了监听,当发现是按了回车键时便自动提交搜索请求的,但输入关键字后按回车时页面竟然跳转了,并且出现“HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面,因为使用了无效方法(HTTP 谓词)”的错误,非常纳闷。

按照错误信息及现象(页面跳转了)来看,应该是因为触发了页面提交了,但事实上,当在keyup事件里面alert时,根本还没有执行到keyup事件里面去就已经跳转了。于是搜索了一些资料来看,结果发现html规范的一种约定:如果一个form里只有一个input,那么无论有无submit按钮或绑定事件,只要在这个焦点在这个input里并且按下回车按钮时,都会执行自动提交表单的操作。看到这里,我恍然大悟了。

找到了原因,解决的办法也就出来了。自动提交的动作本身浏览器在默认事件中绑定的,按键盘的操作就是keyupkeydown,我原本的按键监听是在keyup事件里写的,所以把keydown事件重写,然后终止默认事件执行就OK了。我的代码如下,供遇到同样问题的朋友参考:

/**
 * 关键词输入框回车事件触发搜索
 */
win.find('input[name="keyword"]').bind('keyup', function(e){
	var ev = document.all?window.event:e;
	if(ev.keyCode === 13){
		$("a.search", win).click();
	}
}).bind('keydown', function(e){
	var ev = document.all?window.event:e;
	if(ev.keyCode === 13){
		return false;
	}
});


### Vue 项目部署至 IIS 出现 HTTP 405 错误的原因分析 HTTP 405 方法不允许错误通常发生在服务器配置不支持客户端尝试使用的 HTTP 请求方法时。对于 Vue.js 应用程序,在将其部署到 Internet Information Services (IIS) 上之后遇到此问题,可能是由于以下几个原因造成的: #### 配置 Web.config 文件不当 当应用程序试图通过 POST 或其他非 GET/HEAD 请求访问资源而这些请求未被适当处理时会发生这种情况。确保 `web.config` 中有正确的设置来允许所有必要的 HTTP 动词。 ```xml <configuration> <system.webServer> <!-- ... --> <handlers> <add name="ApiURIs-ISAPI-Integrated-4.0" path="/api/*" verb="GET,POST,PATCH,PUT,DELETE,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/> </handlers> </system.webServer> </configuration> ``` #### 缺少或错误的路由规则 如果 API 路由没有正确映射或者存在冲突,则可能导致某些端点无法接受特定类型的请求。检查并调整应用内的路由逻辑以及 IIS 的 URL Rewrite 模块中的重写规则以确保它们不会阻止合法的操作[^1]。 #### ASP.NET Core Module 设置缺失 如果是基于 .NET Core 构建的服务端部分(即使前端是 Vue),则可能是因为缺少了对 ASP.NET Core Module V2的支持。这可以通过安装相应的 Windows Hosting Bundle 来修复,并确认 applicationHost.config 和 web.config 已经更新为使用最新版本的核心托管模块[^2]。 #### 解决方案建议 为了有效解决问题,可以采取以下措施之一或组合起来实施: - 修改 `web.config` 添加适合的应用处理器; - 安装和启用 IIS 的 WebDAV 扩展服务(有时它会干扰 PUT/PATCH 请求); - 使用 Fiddler 等工具调试实际发出的 HTTP 请求及其响应头信息找出具体哪个环节出了错; - 如果适用的话,请考虑升级整个环境到更稳定的新版软件栈上运行;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值