JavaScript跨域解决方案_CORS预检请求详解-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-11-30 20:09:07

原创

844人浏览过

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：

立即学习“Java免费学习笔记（深入）”；

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请求后，必须正确响应以下头部：

智慧车行预约小程序

智慧车行小程序，是一个专门为洗车/4S/车辆维修行业打造的小程序，前后端完整代码包括车行动态，养车常识，保养预约，维修预约，洗车美容预约，汽车检测预约等功能。采用腾讯提供的小程序云开发解决方案，无须服务器和域名预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项预约凭证：支持线下到场后校验签到/核销/二维码自助签到等多种方式详尽的预约数据：支持预约名单数据导出Excel，打印

查看详情

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

注意：