【发布时间】：2019-11-05 19:14:48
【问题描述】：
更新
TL;DR：这可能是 Safari 和/或 Webkit 中的错误。
更长的 TL;DR：在 Safari 中，在使用 Fetch API 发出 GET 请求后，Safari 会在页面重新加载时自动（并且无意地）重新运行请求 即使发出请求的代码被删除。
新发现的最小可重现代码（以下由 Kaiido 提供）：
前端
<script>fetch('/url')</script>
原帖
我有一个 javascript Web 应用程序，它使用 fetch API 在 Node.js (express) 服务器上发出 GET 请求。
在 Safari 中（问题出在哪里）： 请求按预期完成。
但是
当我重新加载页面时，它会重新发送 GET 请求，从而导致重复。
在 Chrome 中（作为控件）： 一切正常（即没有重复）。
HTML
<div id="buttonTarget"></div>
前端 JS
class ErrorReproduce{
constructor(){}
makeButton(){
let button = document.createElement('button');
button.innerText = 'Send get request';
button.onclick = ()=>{
this.asyncMethod();
};
buttonTarget.appendChild(button);
}//end makeButton()
async asyncMethod(){
let data = await fetch('path/to/testError', {
method: 'GET',
cache:'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
}).then(response => response.json());
}//end asyncMethod
}//end ErrorReporduce
let errRepro = new ErrorReproduce();
errRepro.makeButton();
后端 JS
router.get('path/to/testError',(req,res)=>{
res.send({ok:true});
})
如何重现
单击按钮 - 查看日志中的 GET 请求
无需重新点击按钮即可重新加载页面 - 查看日志中的重复请求
预期行为
我希望在单击按钮并重新加载页面而不再次按下按钮后不会出现重复请求，但在页面重新加载后浏览器确实会立即重复请求。
Safari 页面重新加载后的服务器日志（错误）：
GET /path/to/testError 304 3.206 ms - -
...（其他正常请求）...
页面重新加载 Chrome 后的服务器日志（预期）：
...（其他正常请求）...
编辑
我尝试将 type 属性设置为“按钮”（错误仍然存在）
我尝试使用 CMD+R 和重新加载页面按钮（两者都有错误）
错误报告链接
【问题讨论】：
-
你的意思是你先点击那个按钮，然后重新加载页面，然后不再点击按钮，浏览器会自动发出请求？你是如何重新加载页面的？如果将
-
@Kaiido 正确：（1）单击按钮 - 查看日志中的请求（2）重新加载页面而无需再次按下按钮（我正在使用 CMD+R） - 在日志中再次查看请求。我会尝试您的建议并编辑我的问题以包含新信息。谢谢。
-
@Kaiido 我尝试了 button.type = 'button' 和 button.setAttribute('button') 并且错误仍然存在。我会尝试重新加载不同的页面。
-
终于有一点时间来测试它，我可以重现... 使用 XMLHttpRequest 时也会发生这种情况，在解析时从全局范围执行请求时也会发生这种情况。这意味着最小的复制只是
<script>fetch('/url')</script>然后重新加载并查看每次重新加载时如何获得两个对 /url 的请求，然后即使您删除了<script>标记，仍然会从无处获得一个请求。我再次没有时间进行进一步挖掘，但老实说，我认为这是一个错误并建议您在 webkit 的错误跟踪器上打开一个问题。 -
Ps：还需要注意的是，这些请求在网络面板中是隐藏的，即使是“保留日志”。
标签： javascript node.js safari duplicates fetch