JavaScript跨域方案_CORS预检请求处理-js教程-PHP中文网

JavaScript跨域方案_CORS预检请求处理

夜晨

发布： 2025-11-21 09:41:15

原创

863人浏览过

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预检请求处理

当使用JavaScript进行跨域请求时，浏览器出于安全考虑会实施同源策略限制。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请求，否则浏览器将阻止后续的实际请求。关键响应头包括：

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

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中的处理方式：

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

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";
}

登录后复制

这样所有请求都走同源代理，浏览器不会触发CORS检查。

基本上就这些。只要理解预检机制，并在服务端正确返回响应头，就能顺利处理复杂跨域请求。关键是前后端协同配置，别让OPTIONS请求被忽略或拒绝。

以上就是JavaScript跨域方案_CORS预检请求处理的详细内容，更多请关注php中文网其它相关文章！