让用户请求跨出限制：CORS 的世界

2023-12-28 12:44:46

探索跨域的本质：同源策略的掌控

在网络世界中，同源策略是一个重要的安全屏障，它限制了来自一个源（协议、域名和端口）的脚本与另一个源的资源进行交互。举个例子，源 A 上的脚本无法访问或操作源 B 上的资源，除非 B 明确授予访问权限。同源策略的目的在于保护用户数据，防止恶意攻击。然而，在现代 Web 开发中，跨源请求已成为常态，特别是当多个应用程序通过 API 集成时。

跨越界限：CORS 的诞生与使命

随着 Web 技术的飞速发展，跨源请求的需求日益增长。为了解决同源策略的限制，同时保证数据的安全，W3C（万维网联盟）推出了 CORS（跨域资源共享）机制。CORS 允许服务器设置跨域资源共享策略，指定允许哪些来源的请求可以访问其资源，从而在浏览器和服务器之间建立信任关系。

揭开 CORS 的运作机制：简单请求与复杂请求

了解 CORS 的运作机制对于开发跨源应用程序至关重要。CORS 请求可以分为简单请求和复杂请求。简单请求是指满足以下条件的请求：

请求方法是 GET、HEAD、POST。
HTTP 头部只有简单报头：Accept、Accept-Language、Content-Language、Content-Type。
Content-Type 的值是以下之一：application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

如果请求不符合上述条件，则被视为复杂请求。复杂请求在发送实际请求之前，会先发送一个预检请求（OPTIONS 请求）到服务器，询问服务器是否允许浏览器进行跨源请求。服务器收到预检请求后，将返回一个预检响应，其中包含允许的请求方法、头部和数据类型。

手把手搭建跨域桥梁：服务器端 CORS 策略配置

为了支持跨域请求，服务器端需要配置 CORS 策略。服务器可以通过在 HTTP 响应头中添加以下字段来实现：

Access-Control-Allow-Origin：指定允许访问资源的来源。
Access-Control-Allow-Methods：指定允许的请求方法。
Access-Control-Allow-Headers：指定允许的请求头部。
Access-Control-Allow-Credentials：指定是否允许请求携带身份凭证（如 Cookie）。
Access-Control-Max-Age：指定预检请求的有效期。

通过正确配置这些字段，服务器可以明确告知浏览器哪些来源、方法和头部是可以被允许的。

浏览器端 CORS 处理：授权与拒绝的抉择

当浏览器收到来自服务器的响应头后，会根据 CORS 策略决定是否允许跨域请求。如果服务器的响应头中包含 Access-Control-Allow-Origin 字段，并且该字段的值与请求的源匹配，则浏览器将允许跨域请求。否则，浏览器将拒绝请求并返回错误。

CORS 安全机制：保护数据的安全之盾

CORS 的设计中包含了安全机制，以防止跨域请求被滥用。这些机制包括：

同源策略：即使服务器允许跨域请求，浏览器也会检查请求的来源是否与服务器的同源策略匹配。如果不匹配，浏览器将拒绝请求。
预检请求：对于复杂请求，浏览器会先发送预检请求到服务器，以询问服务器是否允许该请求。服务器的预检响应将决定浏览器是否允许实际请求。
凭证限制：默认情况下，跨域请求不会携带身份凭证（如 Cookie）。如果服务器想要允许跨域请求携带身份凭证，则需要在 HTTP 响应头中设置 Access-Control-Allow-Credentials 字段的值为 true。