CORS跨域资源共享解析

跨域处理中的 CORS（Cross-Origin Resource Sharing，跨域资源共享） 是浏览器强制执行的一种安全机制，用于控制网页中不同“源”（协议+域名+端口）之间的资源交互。以下是通俗解释和核心要点：

为什么需要 CORS？

1. 浏览器的同源策略（Same-Origin Policy）
   默认情况下，浏览器禁止网页向“不同源”的服务器发送请求（例如：https://a.com 的页面不能直接请求 https://b.com 的数据）。这是为了防止恶意网站窃取用户数据。

2. 合理跨域的需求
   实际开发中，前后端分离项目（前端 http://localhost:3000，后端 http://api.example.com）或调用第三方 API 时，必须合法地突破同源限制。

CORS 如何工作？

当浏览器检测到跨域请求时，会自动添加 Origin 请求头（标明请求来源），并检查服务器的响应头是否包含允许该来源的声明。流程分两类：

1. 简单请求（Simple Request）

• 条件：请求方法为 GET/POST/HEAD，且请求头为简单字段（如 Content-Type: text/plain）。
• 过程：
  1. 浏览器直接发送跨域请求，并在 Origin 头中声明来源。
  2. 服务器响应需包含：

     Access-Control-Allow-Origin: https://your-frontend.com  // 或 *（允许任意源）
     

  3. 浏览器检查通过后，前端才能拿到响应。

2. 预检请求（Preflight Request）

• 触发条件：复杂操作（如 PUT、DELETE，或自定义请求头如 Authorization）。
• 过程：
  1. 浏览器先发送 OPTIONS 请求（预检），询问服务器是否允许跨域。
  2. 服务器响应需包含：

     Access-Control-Allow-Origin: https://your-frontend.com
     Access-Control-Allow-Methods: GET, POST, PUT      // 允许的方法
     Access-Control-Allow-Headers: Content-Type, Token // 允许的请求头
     

  3. 预检通过后，浏览器才发送真实请求。

服务端如何配置 CORS？

以 Node.js（Express）为例：

const express = require('express');
const app = express();

// 允许跨域中间件
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend.com'); // 或谨慎使用 *
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true'); // 允许携带Cookie
  next();
});

// 处理预检请求
app.options('*', (req, res) => res.sendStatus(200));

常见问题与解决

1. 浏览器报错 CORS policy blocked

   • 检查服务端是否正确设置了 Access-Control-Allow-Origin 等响应头。
   • 确保 Origin 值在服务端白名单内（不能同时使用 * 和 Credentials）。

2. 携带凭证（Cookies）
   需同时满足：

   • 客户端设置：fetch(url, { credentials: 'include' })
   • 服务端设置：Access-Control-Allow-Credentials: true
   • Access-Control-Allow-Origin 必须是具体域名（不能用 *）。

3. 预检请求失败（OPTIONS 405）
   确保服务器正确处理了 OPTIONS 方法（如示例中的 app.options()）。

替代方案（不推荐）

• JSONP（仅 GET 请求）：利用 <script> 标签跨域，但安全性低。
• 代理服务器：前端请求同源代理，由代理转发请求（适用于无法修改服务端的情况）。

总结

理解 CORS 是前后端协同开发的基础，正确配置可避免 80% 的跨域问题。务必通过服务端控制资源权限，而非关闭浏览器安全设置！