回答

使用 XMLHttpRequest（XHR）进行跨域请求时，如果请求不满足某些简单条件，就会触发一个 "预检" 请求（preflight request）。这是为了让服务器知道客户端将要发送的请求是否被允许。以下是两者的关系和工作机制解释：

1. XMLHttpRequest 简介

XMLHttpRequest（XHR）是一种在浏览器中用于发起 HTTP 请求的 API，允许在不重新加载页面的情况下与服务器进行通信。这使得可以创建动态更新网页的应用程序。

2. 跨域请求和同源策略

Web 安全模型中的同源策略（Same-Origin Policy）限制了来自不同源的资源交互。只有当网页的协议、端口和域名完全匹配时，才能通过 XHR 访问资源。为了解决跨域访问问题，引入了跨域资源共享（CORS）。

3. 预检请求 (Preflight Request)

预检请求是 CORS 标准中的一部分，它在发送真正的请求之前，先发送一个 OPTIONS 请求，以检查服务器是否允许该真实请求。这种预检请求在某些特殊的情况下会被触发：

请求方法不是简单方法（如 GET、HEAD 或 POST，但仅限于特定的 POST 类型）。请求头字段不是简单字段（如 Content-Type 必须是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain）。使用了某些特殊的 headers 例如 Authorization。4. 预检请求和 XHR 的关系

当你使用 XHR 发起一个跨域请求，并且请求不满足“简单请求”的条件时，浏览器会自动发起一个预检请求，具体如下：

预检请求的发送：

浏览器先发送一个 HTTP 方法为 OPTIONS 的请求。该请求包含以下头信息：Origin: 表示请求的来源。Access-Control-Request-Method: 将在实际请求中使用的 HTTP 方法。Access-Control-Request-Headers: 将在实际请求中发送的自定义头。

服务器处理预检请求：

服务器检查请求头并决定是否允许实际请求。如果允许，服务器会在响应中包含以下头信息：Access-Control-Allow-Origin: 表示允许哪些来源的请求。Access-Control-Allow-Methods: 表示允许的 HTTP 方法。Access-Control-Allow-Headers: 表示允许的自定义头。

实际请求的发送：

如果预检请求被服务器允许，浏览器会发起真正的 HTTP 请求（GET, POST 等）。如果预检请求被拒绝，则实际请求不会被发送，浏览器会拦截请求并返回错误给客户端程序。示例

假设你有一个跨域请求需要发送自定义的 Authorization header，这通常会触发预检请求：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/resource', true);
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({ key: 'value' }));

在这个例子中，因为使用了自定义的 Authorization 头，所以浏览器会先发起一个预检请求：

OPTIONS /api/resource HTTP/1.1
Host: example.com
Origin: http://your-origin.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization, content-type

服务器如果允许该请求，会返回：

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://your-origin.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: authorization, content-type

然后浏览器才会继续发送实际的 POST 请求：

POST /api/resource HTTP/1.1
Host: example.com
Origin: http://your-origin.com
Content-Type: application/json
Authorization: Bearer token

{"key":"value"}

总结XMLHttpRequest 是一个用于在浏览器中进行 HTTP 请求的 API。预检请求 (preflight) 是在发起复杂跨域请求之前，由浏览器自动发起的 OPTIONS 请求，目的是检查目的服务器是否允许该复杂请求。预检请求确保跨域请求在实际发送之前有一个安全的协商过程，以防止未经授权的请求。

了解它们的关系可以帮助开发者在处理跨域请求和配置服务器响应头时做出更好的决策。