CORS 是如何实现跨域的？

Question

cors 的基本概念

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种用于让浏览器绕过同源策略限制，实现跨域访问资源的机制。在浏览器端，JavaScript 的跨域请求必须要经过浏览器的同源策略限制，即只能向同一域名下的服务器发送请求，而不能向其它域名的服务器发送请求。CORS 提供了一种通过在服务端设置响应头的方式来实现浏览器端跨域请求的机制。

基本概念有哪些？

1. 预检请求（Preflight Request）：在实际请求之前，浏览器会发送一个预检请求 OPTIONS，来确认服务端是否接受实际请求。
2. 简单请求（Simple Request）：满足以下条件的请求为简单请求：请求方法为 GET、HEAD 或 POST；HTTP 头信息不超出 Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID、DPR、Save-Data、Viewport-Width、Width；Content-Type 的值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded。
3. 非简单请求（Non-simple Request）：不满足简单请求条件的请求。
4. CORS 安全规则（CORS Safelisting Rules）：指的是 CORS 中服务端响应的 Access-Control-Allow-Origin，指定是否允许跨域请求的源。
5. withCredentials：指的是 XMLHttpRequest 中的一个属性，用于在请求中携带 cookie 信息。
6. 暴露 Header（Exposed Headers）：在 CORS 响应中，Access-Control-Expose-Headers 头用于暴露哪些响应头给客户端使用。
7. 存储 Cookies（Cookie Storage）：跨域请求中，浏览器默认不会发送 cookie 信息，需要在服务端设置 Access-Control-Allow-Credentials 和客户端设置 withCredentials 为 true 才能实现。
8. 跨域请求中的安全问题（CORS Security Issues）：CORS 的出现，引入了一些安全问题，例如 CSRF、XSS 等，需要在开发中做好防范措施。

如何实现跨域请求？

在 HTTP 请求中，使用了 CORS 标准头部来告诉浏览器该请求是跨域请求，并且在服务端设置 Access-Control-Allow-Origin 头部来允许指定的域名访问资源。

客户端 CORS 标准头部有以下几个：

• Origin：表示请求来自哪个域名。
• Access-Control-Request-Method：表示请求的方法类型（比如 GET、POST 等）。
• Access-Control-Request-Headers：表示请求头中的额外信息（比如 Content-Type 等）。

服务端返回的响应头部有以下几个：

• Access-Control-Allow-Origin：表示允许的域名访问该资源，可以设置为 * 表示任何域名都可以访问。
• Access-Control-Allow-Credentials：表示是否允许浏览器携带 Cookie 和认证信息等，默认为 false。
• Access-Control-Allow-Methods：表示允许的请求方法类型。
• Access-Control-Allow-Headers：表示允许的请求头中的额外信息。

通过在服务端设置这些头部，可以实现跨域请求的授权和安全验证。

预检请求 作用是啥？

预检请求（Preflight Request）是 CORS 中的一种特殊请求，主要用于在实际请求之前，增加一次 HTTP 查询请求，以检查实际请求是否可以被服务器接受。

在 CORS 中，有些 HTTP 请求是简单请求（Simple Request），比如 GET 和 POST 请求，可以直接发送。而对于一些复杂请求，比如请求方法为 PUT、DELETE、PATCH 等，或者 Content-Type 类型为 application/json、application/xml 等，会在发送真正请求之前，增加一次 HTTP 查询请求，以便服务器能够知道是否允许该请求。这个查询请求就是预检请求，用来查询服务器是否支持该请求，并给出支持的条件。

预检请求中包含了一些额外的 HTTP 头信息，比如 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等，这些信息告诉服务器实际请求中会包含哪些信息，并请求服务器在实际请求中是否能够接受这些信息。

服务器接收到预检请求后，会根据请求头中的信息来判断是否允许实际请求。如果允许，会在响应头中加入一些额外的信息，比如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等，告诉浏览器实际请求可以被接受。如果不允许，则不会发送实际请求，而是直接返回一个错误响应。

如何避免 cors 中的一些安全问题？

在 CORS 中有一些安全问题，例如 CSRF（跨站点请求伪造）攻击和 CORS 劫持。以下是避免这些问题的一些方法：

1. CSRF 攻击：使用 CSRF 令牌来验证请求，这样只有在正确的来源站点上发出的请求才会被视为有效请求。
2. CORS 劫持：在响应中添加 Access-Control-Allow-Origin 标头，并设置为信任的站点。另外，也可以使用 Content-Security-Policy 标头来限制 JavaScript 的执行。
3. 永远不要在 CORS 请求中使用敏感凭据（例如 Cookie 和 HTTP 身份验证信息）。
4. 限制跨域请求的范围，只允许特定的来源站点。
5. 在服务器上使用防火墙和其他安全措施来保护应用程序，例如 SSL / TLS 加密，HTTP Strict Transport Security（HSTS）等。

总之，应该采取适当的安全措施来防止 CORS 相关的安全问题。