access-control-max-age

Access-Control-Max-Age 是一个 HTTP 头字段，用于指定预检请求（preflight request）的结果可以缓存多久。预检请求是浏览器在发送某些跨域请求之前自动发出的 OPTIONS 请求，以检查实际请求是否可以安全发送。

基础概念

当浏览器需要向不同源的服务器发送请求时，为了确保安全性，会先发送一个 OPTIONS 请求（预检请求），询问服务器是否允许该请求。服务器通过响应头中的 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等字段告知浏览器是否允许该请求。Access-Control-Max-Age 字段则告诉浏览器可以缓存这些预检结果的时间（以秒为单位）。

优势

1. 减少请求次数：通过缓存预检结果，浏览器不必每次发送跨域请求前都进行预检，从而减少了不必要的网络请求。
2. 提高性能：减少了请求次数意味着更快的页面加载速度和更好的用户体验。

类型与应用场景

• 类型：这是一个 HTTP 响应头字段，通常由服务器设置。
• 应用场景：适用于任何需要频繁进行跨域请求的场景，如单页应用（SPA）、实时通信应用等。

可能遇到的问题及解决方法

问题1：预检请求仍然频繁发生

原因：可能是因为 Access-Control-Max-Age 设置的值过小，或者浏览器没有正确缓存预检结果。

解决方法：

• 增加 Access-Control-Max-Age 的值，例如设置为 86400（即一天）。
• 确保服务器正确设置了该头字段，并且没有其他因素干扰浏览器的缓存机制。

示例代码（Node.js + Express）

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Max-Age', '86400'); // 设置缓存时间为24小时
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is cross-origin data' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

问题2：跨域请求被阻止

原因：除了预检请求的问题外，还可能是其他 CORS 相关设置不正确。

解决方法：

• 确保 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等头字段都正确设置。
• 如果需要携带凭证（如 cookies），还需设置 Access-Control-Allow-Credentials 为 true，并注意 Access-Control-Allow-Origin 不能设置为 *。

总结

Access-Control-Max-Age 是一个重要的 CORS 相关头字段，通过合理设置它可以显著提高跨域请求的性能。在实际应用中，应根据具体需求调整缓存时间，并确保其他 CORS 设置也正确无误。