CORS协议详解：打破跨域限制与页面级控制

跨域资源共享（Cross-Origin Resource Sharing, CORS）是HTML5引入的一种机制，旨在解决Web应用在安全策略下跨域访问资源的问题。在传统的Web架构中，由于同源策略的限制，JavaScript脚本只能访问同源的资源，如图片、脚本等，以防止恶意网站对用户数据的不当操作。但在现代Web应用中，尤其是API交互和数据共享时，这种限制变得越来越不适应。 CORS的核心理念是通过服务器端的控制，允许特定的跨域请求。与Flash和Silverlight中的crossdomain.xml文件不同，CORS是在页面级别进行控制的。每个页面可以通过HTTP响应头`Access-Control-Allow-Origin`来指定哪些源（即域名）可以访问其资源。这种方式赋予了开发者更细粒度的权限控制，可以根据需求只开放部分资源给特定的外域站点。 CORS请求分为两种类型：简单请求和复杂请求。简单请求可以直接由JavaScript发起，包括GET、HEAD、PUT、DELETE和POST方法，且头信息有限制（如没有`Content-Type`头或`Authorization`头）。复杂的请求则需要先进行预检（ Preflight）请求，这是一个OPTIONS方法的请求，其中包含`Origin`头。服务器在接收到预检请求后，可以根据头信息决定是否允许后续的跨域请求，并在响应中提供必要的权限信息。 例如，预检请求的示例： ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'http://my.app.com' } }) .then(response => response.ok ? response.json() : Promise.reject()) ``` 在这个例子中，`fetch`函数尝试向`https://api.example.com`发送POST请求。由于请求包含复杂方法和头信息，浏览器首先会发送一个预检请求到`api.example.com`，检查`Access-Control-Allow-Origin`头是否允许`http://my.app.com`访问。如果预检请求获准，浏览器才会发送实际的POST请求。 CORS协议是现代Web开发的重要组成部分，它确保了跨域数据交换的安全性，同时也为API设计者提供了灵活性，使得API能够被不同来源的客户端应用程序无缝集成。了解和掌握CORS机制对于构建可扩展和安全的Web服务至关重要。