jQuery AJAX POST 请求添加自定义请求头：让它们出现在请求中，而不是预检中

使用 jQuery AJAX POST 请求时添加自定义请求头

简介

在 jQuery 中使用 AJAX POST 请求时添加自定义请求头是一项常见的任务。然而，有时会出现一个奇怪的现象：请求头出现在 Access-Control-Request-Headers 中，而不是实际请求中。这是由于跨源资源共享 (CORS) 预检机制造成的。

CORS 预检请求

CORS 是一种机制，允许浏览器向不同来源的服务器发出请求。为了确保安全，浏览器在发出实际请求之前会先发出一个预检请求，以检查服务器是否允许该请求。预检请求中包含 Access-Control-Request-Headers 头，该头指定了实际请求中将包含的自定义请求头。

解决问题：在实际请求中添加自定义请求头

如果你希望自定义请求头直接出现在实际请求中，而不是预检请求中，则需要服务器端支持 CORS。服务器端需要在响应预检请求时，设置 Access-Control-Allow-Headers 头，指定实际请求中允许的自定义请求头。

服务器端设置示例

Access-Control-Allow-Headers: My-First-Header, My-Second-Header

这样，浏览器就会在实际请求中包含 My-First-Header 和 My-Second-Header 请求头，而不是 Access-Control-Request-Headers 中。

其他注意事项

CORS 是一项复杂的技术，涉及浏览器和服务器端的设置。请确保在客户端和服务器端都正确配置了 CORS，以避免跨源请求问题。

常见问题解答

1. 为什么我的请求头出现在 Access-Control-Request-Headers 中？

   • 这可能是由于服务器端不支持 CORS 或未正确设置 Access-Control-Allow-Headers 头。

2. 我如何检查服务器端是否支持 CORS？

   • 使用浏览器开发工具检查预检请求响应的 Access-Control-Allow-Origin 头。如果它设置了服务器的起源，则服务器支持 CORS。

3. 我如何设置 Access-Control-Allow-Headers 头？

   • 这取决于服务器端语言和框架。例如，在 Node.js Express 中，你可以使用 res.header('Access-Control-Allow-Headers', 'My-First-Header, My-Second-Header');。

4. 为什么我需要设置 Access-Control-Allow-Headers 头？

   • 如果不设置该头，浏览器会自动将自定义请求头添加到 Access-Control-Request-Headers 中，这可能会导致预检请求失败。

5. CORS 会影响我其他客户端代码吗？

   • 是的，如果没有正确配置 CORS，使用其他客户端库（如 Axios 或 Fetch API）进行跨源请求也可能遇到问题。