深入解析 JS 跨域 CORS 原理

在前端开发中，跨域问题常常困扰着开发者。而 CORS（Cross-Origin Resource Sharing）作为解决跨域问题的一种有效机制，理解其原理至关重要。

简单来说，浏览器出于安全考虑，限制了不同源之间的资源交互。所谓同源，指的是协议、域名和端口号都相同。当页面尝试访问不同源的资源时，就会触发跨域问题。

CORS 的原理基于 HTTP 头信息。服务器端会设置一些特定的响应头，来告知浏览器允许跨域访问。例如，服务器可以设置 Access-Control-Allow-Origin 头，指定允许访问的源。

// 服务器端设置响应头示例
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');

浏览器在发送跨域请求时，会自动添加一些额外的请求头，如 Origin 头，用于表明请求的来源。服务器接收到请求后，根据设置的响应头来决定是否允许该跨域请求。

如果服务器允许跨域访问，浏览器会正常处理响应。否则，浏览器会拦截请求，并抛出跨域错误。

CORS 机制通过服务器端的响应头控制，使得跨域访问变得安全且可行。它为前端开发者提供了一种有效的方式来实现不同源之间的资源交互，推动了互联网应用的丰富和发展。掌握 CORS 原理，能让开发者更从容地应对跨域问题，构建出更强大的前端应用。