【http】http预检请求

http预检请求

相关文章

• http状态码
• http头部信息
• http1、2、3
• http推送与websocket推送
• http预检请求
• cookie、sessionStorage、localStorage的差异

http预检请求

---

一、什么是预检请求

预检请求（Preflight Request）是指浏览器在发送跨源请求（Cross-Origin Request）之前，会先发送一个预检请求给服务器，以确定是否允许实际的请求。预检请求是跨源资源共享（CORS，Cross-Origin Resource Sharing）机制的一部分，它旨在增加Web应用程序的安全性。

预检请求通常是一个OPTIONS请求，它包含了一些额外的头信息，用于说明实际请求的方法、请求头和请求内容类型。服务器在收到预检请求后，会根据请求头中的信息来判断是否允许实际请求。

二、预检请求的目的

• 跨源安全性： 预检请求可以帮助防止跨源请求所带来的安全风险，如跨站请求伪造（CSRF，Cross-Site Request Forgery）等。

• CORS机制支持： 跨源资源共享（CORS）是一种机制，允许网页从不同的域上请求资源。预检请求是CORS机制的一部分，用于在发起实际请求之前检查服务器是否支持跨源请求。

三、预检请求的触发条件

发送预检请求的情况仅发生在跨域请求时，同时满足以下任意条件

• 有些请求需要自定义头信息，如Token、Env等。预检请求可以检查服务器是否支持接受这些自定义的头信息。

  • 例如，如果一个网页想要发送一个带有自定义头信息 Token、Env 的跨域请求，预检请求的请求头可能会像这样：

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://api.example.com/data', true);
  xhr.setRequestHeader('Token', 'myToken123');
  xhr.setRequestHeader('Env', 'production');
  xhr.send();

  • 在发送实际请求之前，浏览器首先发送一个 OPTIONS 方法的预检请求：

  OPTIONS /data HTTP/1.1
  Host: api.example.com
  Origin: http://example.com
  Access-Control-Request-Method: GET
  Access-Control-Request-Headers: Token, Env

  • 在预检请求的响应中，服务器会指定它是否允许接受这些自定义头信息。如果服务器允许，它将在响应头中包含一个 Access-Control-Allow-Headers 字段，其中列出了允许的自定义头信息。

  HTTP/1.1 200 OK
  Access-Control-Allow-Origin: http://example.com
  Access-Control-Allow-Methods: GET
  Access-Control-Allow-Headers: Token, Env

• 部分跨域请求可能会使用非简单请求方法，如PUT、DELETE等。预检请求可以检查服务器是否支持接受这些非简单请求方法。

  • 假设有一个网页 http://example.com/index.html，它想要向另一个域 http://api.example.com/data 发送一个使用 PUT 方法的跨域请求。

  var xhr = new XMLHttpRequest();
  xhr.open('PUT', 'http://api.example.com/data', true);
  xhr.send();

  • 在发送实际请求之前，浏览器首先发送一个 OPTIONS 方法的预检请求：

  OPTIONS /data HTTP/1.1
  Host: api.example.com
  Origin: http://example.com
  Access-Control-Request-Method: PUT

  • 服务器收到预检请求后，确认是否支持接受 PUT 方法的跨域请求。如果服务器支持，会在响应头中包含相应的信息：

  HTTP/1.1 200 OK
  Access-Control-Allow-Origin: http://example.com
  Access-Control-Allow-Methods: PUT

三、预检请求的流程

• 浏览器在发送实际的跨源请求之前，先发送一个OPTIONS预检请求到目标服务器。

• 服务器收到预检请求后，会检查请求头中的Origin、Access-Control-Request-Method和Access-Control-Request-Headers等信息。

• 服务器根据预检请求中的信息来判断是否允许实际请求。如果服务器允许跨源请求，会在响应中包含相应的CORS头信息（如Access-Control-Allow-Origin、Access-Control-Allow-Methods等）。

• 浏览器收到预检请求的响应后，如果服务器允许跨源请求，则会继续发送实际的跨源请求；否则，会抛出相应的错误，阻止实际请求的发送。