Chrome / Javascript http响应中的奇怪错误答案

【问题标题】：Weird bug in Chrome / Javascript http responseChrome / Javascript http响应中的奇怪错误
【发布时间】：2022-09-27 23:08:44
【问题描述】：

我有一个用于客户电子邮件的构建器的应用程序。他们可以选择插入图像等等。

图片上传器发布到 Laravel 函数，该函数将图片上传到 AWS s3 并返回位置和 url。

每当用户尝试在 Chrome 中上传图像时，就会出现问题。响应附有一个 div 元素，如下所示

{\"url\":\"some-url\",\"location\":\"some-location\"}<div style=\"width: 350px; top: -600px; right: 0px; padding: 0px; position: fixed; z-index: 0; visibility: hidden; transition: all 0.5s ease 0s; overflow: hidden;\"></div>

当我在 edge / firefox 中做同样的事情时，响应如下所示：

Object { url: \"some-url\", location: \"some-location\" }

然后我必须通过使用 split() 函数在 javascript 中处理它来删除 div。我目前对该问题的解决方案在 JS 中如下所示：

            if(typeof response === \"object\"){
                result = response;
            }
            else {
                result = JSON.parse(response.split(\'<div\')[0]);
            }

这似乎是 Chrome 的一个奇怪错误，因为它在 firefox / edge 中运行良好。

有没有人经历过这样的事情？

标签： javascript laravel google-chrome firefox microsoft-edge

【解决方案1】：

在我看来，有些东西正在将 div 附加到您的响应中，并且 FireFox 正在做一些额外的工作来处理 Chrome 没有做的事情。

但是问问自己，我们可以从 div 本身推断出什么来确定可能导致问题的原因？它的位置：固定在页面右侧的顶部。因此，这可能是确认上传的通知。

调查处理成功通知的代码部分。

【讨论】：