秦皇岛网站开发报价网页制作素材小图片
深入理解同源策略与跨域资源共享（CORS）
前言
在当今的 Web 开发中，跨域资源请求已成为常见需求。然而，浏览器的同源策略（Same-Origin Policy）作为最基础的安全机制，限制了不同源之间的资源交互。这种限制虽然保障了用户数据安全，但也给开发者带来了挑战。为此，跨域资源共享（CORS）应运而生。本文将深入探讨同源策略的核心原理、CORS 的工作机制，以及如何通过合理配置实现安全的跨域通信。
一、同源策略：Web 安全的基石
同源策略是浏览器最核心的安全策略之一，其核心目标是隔离不同源的资源，防止恶意网站窃取用户数据或发起攻击。
1. 什么是“同源”？
两个 URL 的 协议、主机、端口 完全一致时，才被视为同源。例如：
http://example.com/app与http://example.com/api同源（协议、主机、端口一致）。https://example.com与http://example.com不同源（协议不同）。http://example.com:8080与http://example.com:80不同源（端口不同）。
2. 同源策略的限制范围
同源策略通过以下三个方面保障安全：
- DOM 访问限制
- 禁止 JavaScript 跨域访问其他页面的 DOM，防止恶意脚本窃取敏感信息。
- Web 数据限制
- 限制通过
XMLHttpRequest或Fetch API加载跨域资源，防范 CSRF 攻击。
- 限制通过
- 网络通信限制
- 阻止跨域请求的响应数据被脚本读取，除非服务器显式允许（如通过 CORS）。
二、跨域资源共享（CORS）
当需要合法跨域请求时，CORS 提供了一种安全可控的解决方案。
1. 简单请求
满足以下条件的请求不会触发预检（Preflight）流程：
- HTTP 方法：仅限
GET、HEAD、POST。 - 请求头：仅包含以下标头：
Accept、Accept-Language、Content-Language、Content-Type（值限于text/plain、multipart/form-data、application/x-www-form-urlencoded）。 - 无自定义标头或流式数据。
示例流程：
- 浏览器直接发送请求，并在
Origin头中声明来源。 - 服务器返回响应，若允许跨域，需设置
Access-Control-Allow-Origin头。
2. 预检请求（Preflight Request）
非简单请求（如使用 PUT、DELETE 方法或自定义标头）会触发预检流程：
- 浏览器先发送
OPTIONS请求，携带以下关键头信息：Origin：请求来源。Access-Control-Request-Method：实际请求的 HTTP 方法。Access-Control-Request-Headers：自定义请求头列表。
- 服务器响应预检请求，通过以下头信息声明允许的配置：
Access-Control-Allow-Origin：允许的源（如https://example.com）。Access-Control-Allow-Methods：允许的 HTTP 方法（如POST, GET）。Access-Control-Allow-Headers：允许的自定义头（如Content-Type）。Access-Control-Max-Age：预检结果缓存时间（单位：秒）。
- 预检通过后，浏览器发送实际请求。
3. 附带凭证的请求
若请求需要携带 Cookie 或认证信息，需注意：
- 服务器必须设置
Access-Control-Allow-Origin为具体域名（不能为通配符*）。 - 响应头需包含
Access-Control-Allow-Credentials: true。
错误示例：
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
此时浏览器会拒绝请求，因通配符与凭证不兼容。
三、CORB：跨域数据隔离机制
跨域读取阻止（Cross-Origin Read Blocking, CORB）是浏览器的另一层防护机制，其核心目标是在恶意代码执行前拦截跨域敏感数据（如 JSON、HTML）。例如，即使服务器未正确配置 CORS，CORB 也会阻止脚本读取跨域的 JSON 文件。
四、最佳实践
- 服务器配置
- 避免使用
Access-Control-Allow-Origin: *，明确指定允许的源。 - 限制
Access-Control-Allow-Methods和Access-Control-Allow-Headers的范围。
- 避免使用
- 开发注意事项
- 优先使用简单请求，减少预检开销。
- 敏感接口需启用 HTTPS 并严格校验来源。
总结
同源策略是浏览器安全的核心保障，而 CORS 机制在确保安全的前提下，为合法跨域请求提供了灵活的支持。通过理解简单请求与预检请求的区别、合理配置响应头，开发者可以高效解决跨域问题，同时避免安全风险。未来，随着 Web 应用的复杂度提升，掌握这些安全机制将变得愈发重要。
扩展思考：
- 如何结合 OAuth2 实现安全的跨域认证？
- 在微服务架构下，如何统一管理跨域策略？
希望本文能为你解开跨域问题的迷雾，助力构建更安全的 Web 应用！