返回

揭开跨域资源共享的奥秘：跨域请求之 XHR

前端

导言

纵横于数字海洋，我们时常需要跨越域的界限，获取来自不同源的资源。为此，XMLHttpRequest（简称 XHR）应运而生，成为我们实现跨域通信的利器。然而，跨域资源共享并非一帆风顺，它会触发浏览器实施的同源安全策略，阻碍我们的跨域请求。

同源安全策略：跨域请求的拦路虎

同源安全策略（Same Origin Policy，SOP）是一个浏览器的安全机制，旨在防止恶意脚本访问不同源的资源，保护用户数据和隐私。根据 SOP，只有来自相同源（协议、端口和主机）的脚本才能相互通信。

跨越同源限制：XMLHttpRequest 的 CORS 扩展

为了克服 SOP 带来的跨域请求限制，XMLHttpRequest 引入了跨域资源共享（CORS）机制。CORS 允许浏览器在特定的条件下跨域发送请求，从而拓展了 XHR 的应用场景。

CORS 的工作原理

CORS 依赖于服务器端设置的 HTTP 标头，以明确浏览器是否允许跨域请求。关键的 HTTP 标头包括：

  • Access-Control-Allow-Origin： 指定哪些源可以访问资源。
  • Access-Control-Allow-Methods： 指定允许使用的 HTTP 方法（例如 GET、POST）。
  • Access-Control-Allow-Headers： 指定允许跨域请求中发送的 HTTP 头。
  • Access-Control-Allow-Credentials： 指示是否允许跨域请求携带凭据（如 Cookie）。

实施 CORS

在服务器端，需要在响应头中设置合适的 CORS 标头，以允许跨域请求。例如：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Requested-With, Content-Type

浏览器端 CORS 请求

在客户端，可以使用 XMLHttpRequest 发起跨域请求。浏览器会自动发送必要的 CORS 标头，以请求服务器端授权。如果服务器端返回合适的 CORS 标头，则浏览器会允许跨域请求。否则，请求将被阻止。

跨域请求的局限性

虽然 CORS 扩展了跨域请求的可能性，但它也存在一些局限性：

  • 仅限服务器端控制： CORS 依赖于服务器端设置的 HTTP 标头，因此只能由服务器端控制跨域请求的访问权限。
  • 复杂请求的限制： CORS 无法处理复杂的请求，如文件上传或下载。
  • 凭据传递问题： 默认情况下，CORS 不会传递凭据（如 Cookie），这可能会影响身份验证和会话管理。

解决跨域请求的其它方法

除了 CORS，还有其他解决跨域请求的方法，包括：

  • JSONP： 一种将 JSON 数据作为函数调用的技巧。
  • postMessage： 允许不同源的窗口或 iframe 之间进行消息传递。
  • WebSocket： 一种双向通信协议，可以实现持久连接。

结语

跨域资源共享是网络开发中不可或缺的一环。XMLHttpRequest 的 CORS 扩展为跨域请求提供了强大的解决方案，但仍存在一定的局限性。理解 CORS 的工作原理以及其他跨域请求方法，对于跨越同源限制至关重要，在广阔的数字世界中畅通无阻。