首页 > 文章 > 前端

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

时间：2025-11-26 20:27:39 343浏览收藏

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();
  }
});

注意：

Access-Control-Allow-Origin不能为*，如果前端携带cookie，需明确指定源
Access-Control-Allow-Credentials设为true时，前端需设置withCredentials = true
合理设置Max-Age可减少重复预检，提升性能

前端避免不必要的预检

虽然预检是安全机制，但频繁触发会影响性能。可通过以下方式优化：

尽量使用简单请求：用POST代替PUT/PATCH
避免自定义头部，必要信息可通过标准头部传递
Content-Type保持为application/x-www-form-urlencoded或text/plain
对高频接口，确保服务器开启预检缓存

比如将PUT改为POST，既能达成目的又避免预检：

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ action: 'update', id: 1 })
});

基本上就这些。预检请求是浏览器安全策略的一部分，只要前后端配合好，就能顺利通过。关键是理解它的触发条件和通信机制，针对性配置响应头即可。

今天关于《CORS预检请求解析与跨域解决方案》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！