什么是跨域资源共享（CORS）？
在Web应用中，跨域资源共享（Cross-origin Resource Sharing，CORS）是一种机制，允许在不同域名下的服务器之间共享资源。在默认情况下，Web浏览器不允许跨域请求，这是出于安全考虑。但是，CORS机制通过一些特殊的HTTP头部信息，允许服务器指示浏览器哪些跨域请求是安全的。
CORS的工作原理
常见的跨域请求包括跨域AJAX请求和跨域字体请求等。当浏览器发起跨域请求时，首先会发送一个HTTP头部信息为Origin的请求，包含了请求来源的域名信息。服务器在收到这个请求后，会在响应头中添加一系列的CORS相关的选项，来告诉浏览器该请求是否可以被接受。
在CORS机制中，主要使用以下几个HTTP头部信息:
Access-Control-Allow-Origin：指定允许跨域请求的域名。Access-Control-Allow-Methods：指定允许的HTTP方法。Access-Control-Allow-Headers：指定允许的自定义HTTP头部信息。Access-Control-Max-Age：指定CORS预检请求结果的缓存时间。
CORS使用示例
假设有两个域名，www.example.com和api.example.com。现在需要在前端网页（www.example.com）中通过AJAX请求获取api.example.com中的数据。为了使该请求可行，需要进行CORS配置。
服务端配置
在api.example.com的服务器端，需要设置Access-Control-Allow-Origin头部信息，以允许来自www.example.com的请求。例如，可以设置如下的响应头部信息：
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
客户端请求
在www.example.com的前端代码中，可以使用XMLHttpRequest或fetch API等方式发送AJAX请求。例如，使用fetch API的示例代码如下：
fetch('http://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
预检请求（Preflight Request）
在某些情况下，浏览器会发起一次预检请求（Preflight Request），以确定实际的跨域请求是否安全可行。对于预检请求，服务器需要返回一个特定的HTTP响应，包含了CORS相关的头部信息。预检请求是使用HTTP OPTIONS方法发起的，以判断实际请求的方法、头部信息等是否被允许。服务器需要对OPTIONS请求进行正确的处理和响应。
总结
通过了解CORS机制，我们可以实现在Web应用中跨域请求并共享资源。服务器端需要配置相应的响应头部信息，以告诉浏览器指定域名允许跨域请求。而客户端需要通过特定的方式发送请求，并根据响应结果进行处理。
CORS机制一定程度上增强了Web应用的灵活性，使不同域名之间能够更加便捷地进行数据交互。然而，要注意安全性和保护用户隐私，确保只有可信的域名能够访问敏感资源。
本文来自极简博客，作者：云端漫步，转载请注明原文链接：了解Web应用中的跨域资源共享（CORS）机制
