当前位置：首页 > news >正文

CORS跨域资源共享解析

news 2025/5/31 20:44:22

在这里插入图片描述

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

为什么需要 CORS？

浏览器的同源策略（Same-Origin Policy）
默认情况下，浏览器禁止网页向“不同源”的服务器发送请求（例如：https://a.com 的页面不能直接请求 https://b.com 的数据）。这是为了防止恶意网站窃取用户数据。
合理跨域的需求
实际开发中，前后端分离项目（前端 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）。

过程：

浏览器先发送 OPTIONS 请求（预检），询问服务器是否允许跨域。

服务器响应需包含：

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

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

服务端如何配置 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'); // 允许携带Cookienext();
});// 处理预检请求
app.options('*', (req, res) => res.sendStatus(200));

常见问题与解决

浏览器报错 CORS policy blocked
- 检查服务端是否正确设置了 Access-Control-Allow-Origin 等响应头。
- 确保 Origin 值在服务端白名单内（不能同时使用 * 和 Credentials）。
携带凭证（Cookies）
需同时满足：
- 客户端设置：fetch(url, { credentials: 'include' })
- 服务端设置：Access-Control-Allow-Credentials: true
- Access-Control-Allow-Origin 必须是具体域名（不能用 *）。
预检请求失败（OPTIONS 405）
确保服务器正确处理了 OPTIONS 方法（如示例中的 app.options()）。

替代方案（不推荐）

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

总结

概念	说明
CORS 本质	服务端通过响应头声明允许哪些外部源访问资源。
浏览器角色	拦截跨域响应，依据服务端响应头决定是否放行。
关键响应头	`Access-Control-Allow-Origin`、`Allow-Methods`、`Allow-Headers` 等。
开发必备	后端正确配置 CORS 头，前端处理凭证和预检流程。