Javascript Api PUT请求显示为"；“已取消”；带有错误消息；TypeError:无法获取“文件”；

这是一个奇怪的情况，我已经看了这么多问题，没有什么是完全像它。希望我能得到一些反馈

我正在现有应用程序中创建一个新网页，并尝试执行一个简单的

PUT

api调用，出于某种原因，它在chrome开发工具的“我的网络”选项卡上显示了

cancelled

状态。我正在访问的服务器是我本地机器上的VM。我可以在我的应用程序中从不同的现有页面访问同一个端点，它运行得很好，所以我知道端点没有问题。以下是一些屏幕截图：

这就是chrome开发工具中的“网络”选项卡的外观：

这是当我点击“取消”看跌期权时看到的：

这是chrome开发工具控制台选项卡上显示的内容：

需要注意的一点是，在右侧

常规

部分下的第二个屏幕截图中，它没有为

请求方法

、

状态代码

或

远程地址

列出任何内容，请参见我前面提到的成功api put请求的屏幕截图以供参考：

真正奇怪的是，我的数据库正在用更新后的数据进行更新，因此在某种程度上，即使

PUT

显示为已取消，它仍在工作

调用源自我页面上的vue组件，如果有必要的话，我的后端是PHP

下面是my.js文件中执行

PUT

的调用：

return wait wait SimpleService.put（`app.API_URL}/matching/questions/${borrowerId}），
stringify（answerData），{contentType:'application/JSON'}

因此，我认识到，在没有看到所有附加的代码的情况下，要求一个非黑即白的答案是不现实的，但如果有人能给我一些想法，让我检查一下，我将不胜感激

---

我已经尝试过在不包含不必要内容的情况下包含我能想到的所有内容，但是如果需要我提供任何其他信息来解决这个问题，请告诉我。

这只是请求状态。在后端，如果一切正常，您应该返回状态代码200。Chrome认为请求失败是因为您返回了错误代码，如499客户端关闭请求或444无响应。

Phil的评论是对的，以下是我所理解的解释。单击提交api调用的按钮时，执行按钮单击的默认行为，即重新加载页面。嗯，当重新加载页面时，任何飞行中的网络请求都不再被跟踪，这就是为什么请求在我的控制台选项卡中显示为“已取消”的原因。这也解释了为什么api调用能够成功地更新数据库，因为实际请求没有任何问题。以下是我为解决问题所采取的步骤：

从调用启动api调用过程的javascript函数的按钮中删除

onClick

事件

将此代码添加到表单标记my button lives in:

@submit.prevent=“MyJavaScriptFunctionThatStartSpicall（）”

添加

.prevent

可防止页面重新加载的默认行为发生，因此当响应返回到页面时，页面仍在侦听它。问题解决了

---

我希望这对其他人有所帮助。

导致“取消”AJAX请求的一个常见原因是客户端（浏览器）导航到创建请求的页面之外。您是否正在使用

或表单提交按钮来触发请求？如果是这样，您是否正在阻止默认事件操作，例如

/

？如果您在网络控制台中取消选中“XHR”-only选项，则更容易判断发生了什么on@Phil非常感谢，您的

。阻止发生默认操作所需的
是正确的。我提交了一个概述解决方案的答案，但如果你提交了一个答案，我会投票并选择它作为接受答案。不，你的答案是对问题和解决方案的极好总结。很高兴你把它整理好了