XMLHttpRequest 导致两个网络事件

Question

我注意到，当我在我的脚本中使用 XMLHttpRequest 时，每次调用它时，Chrome 的网络瀑布中都会出现两个事件。

第一个事件的类型为 xhr，大小约为 ~27 字节，第二个事件的类型为 text/html，大小为 0 字节。

我过去注意到它并查看了它，但现在我注意到它导致它连接到的页面两次运行。

这正常吗？我是不是执行错了什么？

function example(){
console.log('ran'); // this shows the function only ran once
var form = new FormData(), xml = new XMLHttpRequest();
form.append('test', '...');
xml.upload.onprogress = function(e){something.style.width = (e.loaded*100/e.total) + "%";}
xml.onload = function(){alert('done');}
xml.open('POST', 'https://externaldomainexample.net', true);
xml.send(form);
}

Answer 1

发出这两个请求是因为您正在向托管您的页面的不同域发出请求（跨域）。如果您在 Chrome 的网络选项卡中启用“方法”列，您会看到第一个请求是 OPTIONS 请求，而第二个是您的 POST 请求。

第一个请求是所谓的 Preflight request，它询问远程服务器允许连接哪些远程主机以及允许它们调用哪些方法。如果此步骤失败，您将在浏览器中看到一条错误消息，指出请求已“被 CORS 策略阻止”。

如果预检请求成功，则进行第二个（POST）请求。

根据服务器的配置方式，您可能需要让它以不同方式处理 OPTIONS 请求，这样它就不会执行相同的操作两次。

XMLHttpRequest 导致两个网络事件

XMLHttpRequest causes two network events

javascript

xmlhttprequest

google-chrome-devtools