J*aScript跨域方案_CORS预检请求处理_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript跨域方案_CORS预检请求处理

2025-11-21

浏览次数：次

返回列表

CORS预检请求是浏览器在发送非简单跨域请求前自动发起的OPTIONS请求，用于确认服务器是否允许实际请求。当请求方法为PUT、DELETE等或包含自定义头（如X-Token）或Content-Type为application/json时触发。该请求携带Access-Control-Request-Method和Access-Control-Request-Headers头，服务端需响应Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头信息。若服务端未正确处理OPTIONS请求，浏览器将阻止后续请求。Node.js可通过中间件设置响应头并放行OPTIONS请求；Nginx可通过反向代理将跨域转为同源，避免CORS检查；前端可尽量使用GET/POST、避免自定义头以减少预检。核心是前后端协同配置，确保预检通过。

javascript跨域方案_cors预检请求处理

当使用J*aScript进行跨域请求时，浏览器出于安全考虑会实施同源策略限制。CORS（跨-Origin Resource Sharing）是一种W3C标准，允许服务端声明哪些外域可以访问资源。对于某些请求，浏览器会先发送一个“预检请求”（Preflight Request），以确认服务器是否允许实际的请求。

什么是CORS预检请求？

预检请求是浏览器在发送某些跨域请求前，自动发起的一个OPTIONS请求。它发生在以下情况：

请求方法不是GET、POST或HEAD
设置了自定义请求头（如X-Token）
Content-Type为application/json等非简单类型

这个OPTIONS请求会携带Access-Control-Request-Method和Access-Control-Request-Headers头，询问服务器是否允许该操作。

服务端如何处理预检请求？

服务端必须正确响应OPTIONS请求，否则浏览器将阻止后续的实际请求。关键响应头包括：

Access-Control-Allow-Origin：指定允许访问的源，如*或https://example.com
Access-Control-Allow-Methods：列出允许的HTTP方法，如GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers：声明允许的请求头，如Content-Type, X-Token, Authorization
Access-Control-Max-Age：设置预检结果缓存时间（单位秒），减少重复请求

例如Node.js + Express中的处理方式：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Token');

  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});

前端避免触发预检的建议

虽然预检是安全机制，但可能影响性能。可通过以下方式减少预检：

尽量使用GET或POST请求
避免添加自定义请求头
发送JSON数据时确保Content-Type: application/x-www-form-urlencoded或text/plain（但通常不现实）
若必须用application/json，需服务端配合支持预检

Nginx反向代理绕过CORS

开发环境中，也可通过Nginx代理避免跨域问题：

location /api/ {
  proxy_pass http://backend-server/;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type, Authorization";
}