跨域请求（Cross-Origin Request）是指浏览器在一个域（比如 https://example.com）下发起的请求，目标资源位于另一个域（比如 https://api.example.com）的情况。由于浏览器的同源策略（Same-Origin Policy），它会限制网页只能访问与当前页面同一源（域、协议和端口）的资源。

1. 同源策略

同源策略是一种浏览器的安全机制，它规定一个网页只能访问与其来源相同的域、协议和端口上的资源。具体来说，“同源”是指：

• 协议相同（如 http 与 https 不同）
• 域名相同
• 端口号相同（如 8080 与 80 不同）

同源策略的目的是防止恶意网站通过脚本窃取另一个网站的敏感数据。比如，防止网站 A 的恶意脚本读取网站 B 上的用户信息。

2. 跨域请求的常见情况

跨域请求是当页面尝试从一个域访问另一个域的资源时发生的。例如：

• 跨域 Ajax 请求：前端页面通过 JavaScript 发起的请求，目标服务器在不同的域上。
• 跨域图片或脚本加载：从不同的域加载图片、JavaScript 文件、CSS 样式表等。
• 跨域资源共享（CORS）：通过特定的 HTTP 头部，允许不同域之间进行资源共享。

3. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是一个浏览器的标准，它允许服务器控制哪些来源（域）可以访问该服务器上的资源。CORS 是一种机制，允许浏览器向跨源服务器发出 XMLHttpRequest 或 Fetch 请求时，浏览器能够接受服务器的响应。

CORS 的工作流程：

1. 预检请求（Preflight Request）：如果一个跨域请求不是简单的 GET 或 POST 请求，或者请求包含了自定义的 HTTP 头部（比如 Authorization），浏览器会先发送一个 OPTIONS 请求（称为预检请求），询问服务器是否允许这个请求。

2. 服务器响应：服务器可以通过设置 HTTP 响应头来决定是否允许跨域请求。例如，通过设置 Access-Control-Allow-Origin 来指定允许哪些域访问资源，或者通过 Access-Control-Allow-Methods 来指定允许哪些 HTTP 方法（如 GET、POST、PUT）进行访问。

3. 浏览器处理：如果服务器返回了合适的 CORS 头部，浏览器就会继续发起实际的请求，否则会阻止该请求。

CORS 相关的 HTTP 头部：

• Access-Control-Allow-Origin：指定允许哪些域访问资源。如果允许所有域，可以设置为 *（通配符）。

  例子：

  Access-Control-Allow-Origin: *
  

• Access-Control-Allow-Methods：指定允许的 HTTP 方法，如 GET、POST、PUT 等。

  例子：

  Access-Control-Allow-Methods: GET, POST, PUT
  

• Access-Control-Allow-Headers：指定允许客户端请求中携带的自定义请求头。

  例子：

  Access-Control-Allow-Headers: Content-Type, Authorization
  

• Access-Control-Expose-Headers：指定哪些响应头可以被浏览器访问。默认情况下，只有一部分响应头（如 Cache-Control、Content-Language）是可以被访问的。

  例子：

  Access-Control-Expose-Headers: Content-Disposition
  

• Access-Control-Allow-Credentials：指定是否允许携带用户凭证（如 Cookies、Authorization 头等）进行请求。如果允许，值应该设置为 true。

  例子：

  Access-Control-Allow-Credentials: true
  

4. 跨域请求的常见解决方案

• CORS（跨域资源共享）：这是最常用的跨域解决方案，通过在服务器设置特定的 HTTP 头来允许跨域请求。

• JSONP（JSON with Padding）：一种早期的跨域解决方案，通常用于 GET 请求。通过动态插入 <script> 标签来绕过浏览器的同源策略，但只能用于 GET 请求，并且有一定的安全隐患，因此现在不太推荐使用。

• WebSocket：WebSocket 协议不受同源策略的限制，可以跨域通信，但前提是服务器和客户端都支持 WebSocket 协议。

• 代理服务器：前端可以通过设置代理服务器，将跨域请求先发送到同源的服务器，然后由服务器转发到目标服务器。这种方式的缺点是需要维护额外的服务器端代码。

5. 跨域的实际例子

假设你在 https://example.com 的网页上通过 JavaScript 向 https://api.example.com 发起一个 API 请求。由于这是一个跨域请求，浏览器会阻止这种行为，除非目标服务器（https://api.example.com）在响应中添加了允许跨域访问的 CORS 头部。例如：

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

这样，浏览器就会允许 https://example.com 页面访问 https://api.example.com 的资源。

6. 总结

• 跨域请求 是指一个域的网页尝试访问另一个域上的资源。
• 浏览器会遵循 同源策略，默认阻止跨域请求，但可以通过 CORS 等机制来实现跨域资源共享。
• CORS 是一种现代的跨域请求解决方案，允许服务器指定哪些源（域）可以访问其资源，并通过设置响应头来控制请求的允许行为。