Table of Contents:

跨域请求是什么

跨域请求（Cross-Origin Request），简称CORS，是指在Web开发中，当一个Web页面向不同源（即协议、域名或端口三者中至少有一个不同）的服务器发起请求时，浏览器会遵循同源策略（Same-Origin Policy）的限制，对这些跨源请求进行限制。同源策略是一种安全策略，它限制了来自不同源的脚本在浏览器中运行，从而保护用户隐私信息，防止身份伪造等安全问题。

当一个Web页面中的JavaScript代码通过Ajax等方式向不同源的服务器发送HTTP请求时，浏览器会拒绝该请求，因为它违反了同源策略。为了允许这种跨域请求，服务器需要在响应中包含特殊的HTTP头部信息，通过CORS机制来告知浏览器哪些源（域名）可以访问其资源。这样，如果请求符合服务器设置的规则，浏览器将允许跨域请求，否则仍会拒绝。

域(0rigin)
Web 概念中 域(0rigin)的内容由 scheme(protocol)-协议， host(domain)- 主机 和用于访问它的 URL port - 端口 定义。仅仅当 scheme、host、port 都匹配时，两个对象才有相同的来源。这种协议相同，域名相同，端口相同的安全策略也被称为 同源策略(Same 0rigin Policy)某些操作仅限于具有相同来源的内容，可以使用 CORS 取消此限制。

同源策略
处于安全的因素，浏览器限制了从脚本发起跨域的 HTTP 请求。 XLHttpRequest 和其他 Fetch接口 会遵循 同源策略(same-origin policy)。也就是说使用这些 API的应用程序想要请求相同的资源，那么他们应该具有相同的来源，除非来自其他来源的响应包括正确的 CORS 标头也可以。
同源策略是一种很重要的安全策略，它限制了从一个来源加载的文档或脚本如何与另一个来源的资源进行交互。 它有助于隔离潜在的恶意文档，减少可能的攻击媒介。

CROS（通常应为CORS，即跨域资源共享）需要设置的HTTP头部主要有以下几个，它们共同作用于控制跨域请求的访问权限：

  1. Access-Control-Allow-Origin：
    • 这个头部字段指定了哪些源（域名、协议和端口）可以访问资源。可以设置为特定的源（如https://example.com），或者设置为*（表示允许任意源访问）。然而，当请求涉及敏感信息（如cookies或HTTP认证信息）时，不应将Access-Control-Allow-Origin设置为*，因为这可能导致安全风险。
  2. Access-Control-Allow-Methods：
    • 此字段列出了实际请求所允许使用的HTTP方法。例如，可以设置为"GET, POST, PUT, DELETE"等，表示允许这些方法的跨域请求。
  3. Access-Control-Allow-Headers：
    • 这个字段指定了客户端在跨域请求中可以发送哪些HTTP请求头。由于不能简单地将其设置为*（必须明确列出允许的头部类型），因此开发者需要根据实际需求来设置这个字段，如"X-Requested-With, Content-Type, Accept, Authorization"等。
  4. Access-Control-Allow-Credentials：
    • 当设置为true时，表示允许发送带凭证的请求（如cookies或HTTP认证信息）。需要注意的是，如果设置了Access-Control-Allow-Credentials为true，则不能将Access-Control-Allow-Origin设置为*，必须明确指定允许的源。
  5. Access-Control-Expose-Headers（可选）：
    • 默认情况下，XMLHttpRequest和Fetch API只能从响应中读取简单的头部字段（如Cache-Control、Content-Language、Content-Type、Expires、Last-Modified和Pragma）。如果需要暴露其他头部字段给客户端，可以使用Access-Control-Expose-Headers字段来指定。
  6. Access-Control-Max-Age（可选）：
    • 这个字段指定了预检请求的结果能够被缓存多久。这对于减少不必要的预检请求、优化性能很有帮助。