在当今的互联网应用中，前后端分离的开发架构越来越普遍。随着前端技术的不断发展，JavaScript 成为了构建交互式网页和应用的重要工具。然而，由于同源策略的限制，JavaScript 的跨域请求成为了一个常见的挑战。
跨域请求（Cross-Origin Resource Sharing，简称 CORS）是一种标准机制，用于在浏览器中实现跨域通信。CORS 的目的是授予 Web 应用在其他域名下发送异步 HTTP 请求的权限，从而降低前端与后端之间的耦合度，并允许不同源的网页互相共享资源。
什么是同源策略？
同源策略是浏览器的一项安全策略，它限制了一个源的文档或脚本如何与其他源的资源进行交互。同源是指协议、域名和端口号都相同。例如，http://example.com 和 http://example.com/blog 是同源的，而 http://example.com 和 http://api.example.com 是不同源的。
在同源策略下，浏览器默认禁止跨域的 AJAX 请求和共享资源。这是为了防止恶意网站窃取用户的信息，从而增强用户的安全性。但是，在实际的开发中，我们经常需要与其他域的资源进行交互，这时就需要使用 CORS。
如何使用 CORS？
CORS 通过在 HTTP 头中添加特定的字段，来告知浏览器是否允许发送跨域请求。当浏览器发现请求中包含 CORS 相关字段时，会根据服务器返回的响应头来决定是否允许请求。
服务端配置
服务端需要允许特定的域访问资源，以便浏览器可以正常发送跨域请求。在常见的 Web 服务器（如 Apache、Nginx）中，可以通过添加如下响应头来启用 CORS：
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Methods: <methods>
Access-Control-Allow-Headers: <headers>
<origin>：指定允许访问的源。可以是具体的域名，也可以是*，表示接受任意域的请求。<methods>：指定允许的 HTTP 方法。例如，GET、POST等。<headers>：指定允许的自定义请求头。例如，Content-Type、Authorization等。
客户端代码
在前端代码中，可以通过设置 XMLHttpRequest 的请求头来发送跨域请求：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 处理响应数据
}
};
xhr.send();
其中的关键点是：
setRequestHeader：设置请求头，以告知服务器发送跨域请求。withCredentials：如果需要在跨域请求中发送 Cookies，则需要将该属性设置为true。默认情况下，跨域请求不会发送 Cookies。
CORS 的安全性考虑
虽然 CORS 允许跨域请求，但由于存在安全风险，需要在开发和配置时注意以下事项：
- 需要仔细限制服务端发送
Access-Control-Allow-Origin响应头，避免将*用于生产环境，以减少潜在的安全漏洞。 - 涉及用户敏感信息的请求，必须确保使用适当的身份验证和授权机制，防止数据泄漏和访问权限问题。
- 服务器在响应 OPTIONS 请求时，需要根据请求头中的
Origin字段，返回允许的 HTTP 方法列表和其他相关信息。同时，需要设置Access-Control-Max-Age响应头，以避免再次发送 OPTIONS 请求。
总结
CORS 是一种解决跨域请求的标准机制，它通过在 HTTP 头中添加特定字段，授予 Web 应用在其他域名下发送异步 HTTP 请求的权限。使用 CORS 可以降低前后端之间的耦合度，提高开发效率。但是，我们需要注意确保跨域请求的安全性，避免出现潜在的安全漏洞。
希望本篇博客对你理解和使用 CORS 提供了一些帮助。如有疑问或建议，欢迎留言讨论！
本文来自极简博客，作者：绿茶味的清风，转载请注明原文链接：互联网基础技术入门指南：跨域请求
