CORS - 如何“预检”http请求

服务器

CORS - 如何“预检”HTTP请求？

跨源资源共享（CORS）是一种允许在浏览器中进行跨域请求的机制。CORS允许服务器在响应中包含一些特殊的HTTP头部，以告知浏览器是否允许通过JavaScript发起跨域请求。然而，有些请求可能会对服务器端资源产生一些副作用，比如修改数据或者执行敏感操作，这时候就需要进行一些预检（Preflight）操作，以确保服务器端是否允许这样的请求。

什么是预检请求？

预检请求是在实际的跨域请求之前，浏览器会先发送一个OPTIONS请求到服务器端，以获取服务器是否允许实际请求的权限。这个OPTIONS请求中会包含一些额外的头部信息，比如请求方法、请求头部等等。服务器端接收到这个预检请求后，会根据请求头部的信息做出相应的响应。

预检请求的过程

1. 浏览器发送OPTIONS请求到服务器端。

2. 服务器接收到预检请求后，根据请求中的头部信息判断是否允许实际请求。

3. 如果允许实际请求，服务器返回一个带有特定头部的响应。如果不允许实际请求，服务器返回一个带有错误状态码的响应。

4. 浏览器根据服务器返回的响应，决定是否继续发送实际请求。

预检请求的代码示例

下面是一个使用JavaScript发起的跨域请求的代码示例，其中包括了预检请求的过程：

Javascript
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/some-resource', true);
xhr.setRequestHeader('Content-Type', 'application/JSon');
xhr.setRequestHeader('Authorization', 'Bearer token123');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log('请求成功');
    } else {
      console.log('请求失败');
    }
  }
};
xhr.send(JSON.stringify({ data: 'some-data' }));

在这个示例中，我们使用XMLHttpRequest对象发送一个POST请求到https://api.example.com/some-resource。请求头部包含了Content-Type和Authorization两个字段。在发送实际请求之前，浏览器会先发送一个OPTIONS请求，以获取服务器是否允许实际请求。

预检请求的注意事项

在使用CORS进行跨域请求时，需要注意以下几点：

1. 服务器端需要正确处理预检请求，并返回适当的响应。可以根据请求头部中的信息来判断是否允许实际请求。

2. 浏览器会对预检请求进行缓存，下次再发起相同的跨域请求时，会直接发送实际请求，而不再进行预检。

3. 预检请求的结果会被浏览器缓存一段时间（通常为2小时），在这段时间内，相同的跨域请求不会再发送预检请求。

通过预检请求，CORS机制可以确保服务器端是否允许特定的跨域请求。预检请求的过程是浏览器在发送实际请求之前先发送一个OPTIONS请求，服务器根据请求头部的信息来判断是否允许实际请求。开发者在进行跨域请求时需要注意处理预检请求，并根据需要设置合适的响应头部。通过CORS，浏览器可以在安全的情况下进行跨域请求，从而提升了Web应用的灵活性和交互性。