当前位置：首页 > 文章列表 > 文章 > 前端 > CORS跨域问题及预检处理全解析

CORS跨域问题及预检处理全解析

2026-04-10 08:15:45 0浏览收藏

本文深入解析了CORS跨域机制中的关键环节——预检请求（Preflight Request），揭示了浏览器在发送PUT、DELETE、带自定义头或application/json等“非简单请求”前，如何自动发起OPTIONS请求来征询服务器许可，并系统讲解了服务端（如Node.js/Express、Nginx）必须正确响应Access-Control-Allow-*系列头部才能放行后续请求的核心逻辑，同时提供了前端规避预检的实用策略与代理绕过方案，强调只有前后端协同配置、精准处理OPTIONS请求，才能真正打通复杂跨域场景，既保障安全又不失灵活性。

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请求，否则浏览器将阻止后续的实际请求。关键响应头包括：

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

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请求被忽略或拒绝。

理论要掌握，实操不能落！以上关于《CORS跨域问题及预检处理全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

跨域