返回

跨域的最后一战：理解浏览器同源策略和 CORS

前端

引言

在当今互联互通的世界中，跨域请求已成为网络开发的常态。然而，它也带来了一个潜在的挑战：跨域请求阻止（CORB）。了解浏览器的同源策略和 CORS 对于解决这些问题至关重要。

同源策略

同源策略是浏览器的一个安全机制，旨在防止恶意网站访问敏感信息。它规定只有与当前页面具有相同协议、端口和主机名的页面才能互相通信。换句话说，同一来源的页面相互信任，而跨源页面则不信任。

跨域请求阻止（CORB）

跨域请求阻止是同源策略的延伸，用于防止来自不同来源的恶意请求修改或读取受保护的资源（如 cookie、本地存储）。当请求来自与当前页面不同的来源时，浏览器将自动阻止该请求。

CORS（跨域资源共享）

CORS 是一组 HTTP 头，允许服务器指定哪些域可以跨源访问其资源。它是一种安全机制，允许特定来源的跨域请求，同时阻止其他来源。

CORS 工作原理

CORS 依赖于以下 HTTP 头：

  • Origin： 指示请求的来源。
  • Access-Control-Allow-Origin： 指示服务器允许哪些域跨域访问其资源。
  • Access-Control-Allow-Methods： 指示允许哪些 HTTP 方法用于跨域请求。
  • Access-Control-Allow-Headers： 指示允许跨域请求包含哪些 HTTP 头。

配置 CORS

在服务器端配置 CORS 以允许跨域请求：

  • 在响应中设置 Access-Control-Allow-Origin 头，指定允许跨域的来源。
  • 根据需要设置其他 CORS 头，例如 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。

客户端实现

在客户端，使用以下技术实施 CORS：

  • XMLHttpRequest： 将 withCredentials 属性设置为 true 以发送凭据（如 cookie）。
  • Fetch API： 使用 credentials 选项以发送凭据。

解决跨域请求

通过理解浏览器的同源策略和 CORS，可以解决跨域请求问题：

  • 确保请求符合同源策略，或
  • 配置服务器以允许跨域请求。

结论

同源策略和 CORS 是浏览器重要的安全机制，有助于保护用户免受跨域攻击。通过了解这些概念并正确配置 CORS，开发人员可以安全地进行跨域请求，从而提高 web 应用程序的可用性和交互性。