CORS：为什么我的浏览器不发送 OPTIONS 预检请求

AI

为什么我的浏览器不发送 OPTIONS 预检请求？

在进行跨域资源共享（CORS）时，浏览器会发送一个 OPTIONS 预检请求，以确定是否允许实际请求（例如 GET 或 POST）跨域访问。然而，有时候我们会遇到浏览器没有发送 OPTIONS 预检请求的情况。这可能是由于以下几个原因：

1. 简单请求：根据CORS规范，如果请求满足以下条件，浏览器会将其视为简单请求，并直接发送实际请求，而不发送 OPTIONS 预检请求：

- 请求方法为 GET、HEAD 或 POST。

- 请求头只包含一些特定的简单请求头字段，如 Accept、Accept-Language、Content-Language、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data 或 text/plAIn）。

2. 无需预检的缓存：如果之前已经进行过针对同一资源的预检请求，并且结果被缓存浏览器会直接使用缓存的结果，而不发送新的预检请求。

3. 跨域资源已经被服务器允许：如果服务器在响应中设置了适当的 Access-Control-Allow-Origin 头部字段，指定了允许访问的源，浏览器将不发送 OPTIONS 预检请求，而直接发送实际请求。

4. 响应未包含 CORS 相关头部字段：如果服务器在响应中未包含必需的 CORS 头部字段，浏览器将不发送 OPTIONS 预检请求，并拒绝实际请求。

案例代码：

Javascript
// 假设我们的网站位于 http://www.example.com
// 设置服务器响应头，允许来自 http://www.example.com 的跨域请求
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});
// 处理实际请求
app.get('/api/data', function(req, res) {
  // 返回一些数据给前端
  res.JSon({ message: 'Hello CORS!' });
});

以上代码是一个使用 Express 框架的 Node.JS 服务器示例。在这个例子中，我们通过设置响应头部的 Access-Control-Allow-Origin 字段，允许来自 http://www.example.com 的跨域请求。此外，我们还设置了允许的请求方法和请求头字段。

当浏览器向 http://www.example.com/api/data 发送 GET 请求时，由于条件满足简单请求的要求，浏览器不会发送 OPTIONS 预检请求，而直接发送实际请求。服务器收到请求后，返回一个包含简单 JSON 数据的响应。

解决方法：

如果我们希望浏览器发送 OPTIONS 预检请求，以便在实际请求之前进行一些额外的验证或处理，可以通过以下方法解决：

1. 确保请求不符合简单请求的条件，例如添加一些自定义请求头字段。

2. 检查服务器响应是否包含了适当的 CORS 头部字段，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。

3. 确保之前没有对同一资源进行过预检请求，并且缓存中没有预检请求的结果。

通过正确设置服务器响应头部字段，我们可以控制浏览器发送 OPTIONS 预检请求的行为，从而更好地处理跨域资源共享的问题。