跨域请求处理

跨域请求处理主要涉及到浏览器的安全机制，即同源策略（Same-Origin Policy）。根据这一策略，网页只能请求其所在域（协议、域名和端口相同）的资源。然而，在实际开发中，我们经常需要从一个域访问另一个域的数据，这就需要用到跨域资源共享（CORS, Cross-Origin Resource Sharing）等技术。

跨域资源共享 (CORS)

CORS 是一种基于 HTTP 头的机制，它允许服务器声明哪些源（域）可以访问其资源。当一个请求被认为是跨域时，浏览器会自动检查响应中的特定 HTTP 头部信息来确定是否允许该请求。

如何实现 CORS

• 简单请求：如果请求方法是 GET、HEAD 或 POST 之一，并且除了被用户代理自动设置的头部之外，仅使用了Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain的自定义头部，那么这个请求被视为简单请求。

  • 服务器通过在响应中添加Access-Control-Allow-Origin头部来指定允许访问资源的域。例如：

    Access-Control-Allow-Origin: https://example.com

• 预检请求（Preflight Request）：对于非简单请求（如使用 PUT 或 DELETE 作为 HTTP 方法，或者设置了自定义头部），浏览器首先发送一个 OPTIONS 请求（称为预检请求）到服务器，以询问服务器是否允许实际请求。预检请求包含以下头部：

  • Access-Control-Request-Method：告知服务器实际请求使用的 HTTP 方法。
  • Access-Control-Request-Headers：列出除简单头部外的所有自定义头部。

  服务器必须对预检请求做出回应，指示允许的方法和头部：

  Access-Control-Allow-Methods: POST, GET, OPTIONS
  Access-Control-Allow-Headers: Content-Type, X-Custom-Header

• 凭据支持：默认情况下，CORS 请求不包括凭据（cookies 或 HTTP 认证信息）。要支持凭据，需要做两件事：

  • 在客户端设置 XMLHttpRequest 对象的withCredentials属性为 true。
  • 在服务器响应中添加Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能设置为通配符（*），而应具体指定允许的源。

其他跨域解决方案

除了 CORS，还有其他几种方法可以在一定程度上解决跨域问题：

• JSONP (JSON with Padding)：一种利用<script>标签不受同源策略限制的特点来加载数据的技术。不过，JSONP 只支持 GET 请求，并且存在安全风险，因为它允许执行任意 JavaScript 代码。

• 代理服务器：通过在同一个域内设置一个代理服务器，前端应用可以通过与代理服务器通信间接地访问外部资源。这种方法虽然有效，但增加了复杂性和潜在的性能开销。

• WebSocket：WebSocket 协议本身没有同源策略限制，因此可以用来进行跨域通信。不过，它的主要用途是提供全双工通信通道，而不是简单的请求/响应模型。

总之，CORS 是最推荐的方式，因为它直接解决了跨域问题，并且提供了灵活的控制选项。对于特殊情况，可以根据需求选择合适的替代方案。