为什么POST请求会发送两次请求？

在面试中，很多新手程序员常常会被问到一个有趣的问题：“为什么POST请求有时候会发送两次呢？”这个问题听起来有点复杂，但其实用简单的语言来说并不难理解。今天我们就来聊聊这个问题，帮助大家更好地准备面试。

POST请求是什么？

首先，我们得了解什么是POST请求。POST请求是一种向服务器发送数据的方式。当你在网页上填写表单，比如提交注册信息或上传文件时，浏览器会发送一个POST请求给服务器，告诉它：“嘿，我这里有些内容需要你处理。”

生活中的例子

想象一下，你去餐厅点菜。你会先告诉服务员你要吃什么（这类似于POST请求），然后服务员可能会问厨房是否能接受你这道菜。如果可以，厨房才会开始准备食物。这里的“询问”过程就像预检请求。

为什么会发送两次请求？

那么，为啥有时候会发两次请求呢？这主要与浏览器的 预检机制 有关。特别是在跨域请求时，浏览器会先发送一个 OPTIONS请求 来检查服务器是否允许该请求。这种方式可以确保请求的安全性。

什么是预检请求？

预检请求是指在正式发送POST请求之前，浏览器先发一个OPTIONS请求，询问服务器是否接受将要发送的请求。如果服务器同意，浏览器才会继续发出正式的POST请求。

代码示例

假设我们正在开发一个图片上传的功能，当用户选择一张图片后点击上传按钮时，代码可能长这样：

// 图片上传函数
function uploadImage(file) {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "https://example.com/upload");

    // 设置请求头
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", "application/json"); // 注意：使用了非标准类型

    // 发送请求
    xhr.send(JSON.stringify({ image: file }));
}

在这个例子中，如果 Content-Type 是 application/json 而不是常规的 application/x-www-form-urlencoded，浏览器就会先发送一个OPTIONS请求，询问服务器是否可以接受这种类型的请求。

预检请求与正式请求的区别

• 目的不同：预检请求是为了确认服务器是否允许某种类型的请求，而正式请求则是执行实际的操作。
• 请求方法不同：预检请求始终使用OPTIONS，而正式请求可以是GET、POST等。
• 请求头和请求体：预检请求通常仅包含基本的请求头，正式请求可能包含更多的数据。

总结

简而言之，POST请求有时候会发两次，是因为浏览器为了安全起见，先发送一个预检请求去询问服务器：“我能发这个请求吗？”如果服务器响应允许，那么浏览器才会继续发送正式的POST请求，这样就能确保请求能够顺利处理。

通过这个例子，我们可以更好地理解为何在某些情况下POST请求会发送两次。希望大家在面试中能够自信地回答这个问题，并且理解背后的原理。

祝大家学习顺利，面试成功！