当前位置：首页 > 文章列表 > 文章 > 前端 > CORS预检请求解析与跨域解决方案

CORS预检请求解析与跨域解决方案

2025-11-26 20:27:39 0浏览收藏

CORS跨域问题是前端开发常见挑战，本文深入解析CORS预检请求（Preflight Request），即OPTIONS请求，它是浏览器在发起非简单请求（如PUT、DELETE或携带自定义Header）时，为确保安全而自动发送的。文章详细阐述了触发预检的条件，包括请求方法、自定义请求头以及Content-Type类型等，并介绍了预检请求的交互过程，重点在于服务器如何正确响应Access-Control-Allow-Origin、Access-Control-Allow-Methods等关键头部。同时，本文还提供了Node.js Express的后端配置示例，并强调了前端如何通过优化请求方式（如使用POST代替PUT）和合理设置Max-Age来避免不必要的预检，从而提升Web应用的性能，最终有效解决跨域问题。

CORS预检请求是浏览器对非简单请求（如PUT、自定义头、application/json）发起前自动发送的OPTIONS请求，用于确认服务器是否允许跨域。满足以下任一条件即触发：请求方法非GET/POST/HEAD、设置自定义头部（如X-Token）、Content-Type为application/xml等非常规类型。浏览器在预检中携带Access-Control-Request-Method、Access-Control-Request-Headers和Origin头，服务器需响应Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers及可选的Access-Control-Max-Age。以Node.js Express为例，可通过拦截OPTIONS请求并设置对应响应头来处理，注意当携带凭证时Access-Control-Allow-Origin不能为*且需配合Access-Control-Allow-Credentials。前端可优化请求方式避免预检，如用POST代替PUT、减少自定义头、使用标准Content-Type，并利用Max-Age缓存预检结果提升性能。理解机制并合理配置即可解决跨域问题。

JavaScript跨域解决方案_CORS预检请求详解

跨域问题在前端开发中很常见，尤其是前后端分离项目中。当浏览器发起跨域请求时，如果涉及复杂请求，会先发送一个预检请求（Preflight Request），这就是CORS中的OPTIONS请求。理解并正确处理预检请求，是解决跨域问题的关键。

什么是CORS预检请求

当浏览器判断某个请求属于“非简单请求”时，会自动在正式请求之前发送一个OPTIONS请求，询问服务器是否允许该跨域请求，这个请求就是预检请求。

满足以下任一条件的请求会被视为非简单请求：

请求方法不是GET、POST或HEAD
设置了自定义请求头（如X-Token、Authorization等）
Content-Type的值为application/json、multipart/form-data以外的类型（如application/xml）

例如，使用fetch发送JSON数据并携带token：

fetch('/api/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    'X-Token': 'abc123'
  },
  body: JSON.stringify({id: 1})
});

这类请求会触发预检流程。

预检请求的交互过程

浏览器发起预检请求时，会带上几个关键头部信息：

Access-Control-Request-Method：实际请求的方法（如PUT）
Access-Control-Request-Headers：实际请求中包含的自定义头部（如X-Token）
Origin：请求来源（协议+域名+端口）

服务器收到OPTIONS请求后，必须正确响应以下头部：

Access-Control-Allow-Origin：允许的源，不能为*（若携带凭证）
Access-Control-Allow-Methods：允许的HTTP方法
Access-Control-Allow-Headers：允许的请求头字段
Access-Control-Max-Age：预检结果缓存时间（秒）

只有当服务器返回的响应头匹配了预检要求，浏览器才会继续发送真实请求。

后端如何正确处理预检请求

以Node.js + Express为例，可以这样设置中间件：

app.use((req, res, next) => {
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Token, Authorization');
    res.sendStatus(200);
  } else {
    next();
  }
});

注意：