允许跨源节点 - Javascript

在浏览器中使用Javascript时，由于同源策略的限制，只允许页面从相同的源加载脚本、读取数据或与其他源进行通信。然而，为了实现一些特殊需求，有时我们需要跨越不同的源进行数据交互或加载资源。为了解决这个问题，Javascript引入了**允许跨源节点(Cross-Origin Resource Sharing, CORS)**的机制。

什么是允许跨源节点(CORS)？

允许跨源节点(CORS)是一种机制，它允许在浏览器中运行的Web应用程序访问不同源的资源。CORS允许服务器在响应中添加一些额外的HTTP头，指示浏览器是否允许该请求跨越源。只有在服务器明确授权的情况下，浏览器才会允许跨源请求。

如何使用CORS？

在Javascript中，我们可以通过设置XMLHttpRequest对象的withCredentials属性来启用CORS。这样，在发送XMLHttpRequest请求时，浏览器会自动在请求头中添加Origin字段，并将其设为当前页面的源。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.withCredentials = true; // 启用CORS
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功处理响应数据
    var response = xhr.responseText;
    // ...
  }
};
xhr.send();

在服务器端，需要在响应头中添加Access-Control-Allow-Origin字段来指定允许访问的源。例如，在PHP中可以添加以下代码：

header('Access-Control-Allow-Origin: https://example.com');

这将允许https://example.com发起的请求跨源访问服务器资源。

高级CORS设置

除了简单的请求之外，对于一些复杂的请求（例如带有自定义HTTP头的POST请求、感觉等）需要进行额外的设置。

预检请求（Preflight Request）

在发送复杂请求之前，浏览器会自动发送一个预检请求（Preflight Request），以获取服务器是否允许实际请求。预检请求是一种OPTIONS请求，它包含对实际请求的信息，服务器需要正确响应该预检请求。

服务器需要在预检请求的响应中添加一些额外的头信息，例如Access-Control-Allow-Methods(允许的HTTP方法)、Access-Control-Allow-Headers(允许的HTTP头)等。

携带凭证（CORS with Credentials）

默认情况下，跨源请求不会发送凭证（如cookies、HTTP认证或客户端SSL证书）。如果需要发送凭证，可以将withCredentials属性设置为true，并在服务器端设置Access-Control-Allow-Credentials字段为true。

结论

通过使用允许跨源节点(CORS)机制，我们可以在浏览器中跨越不同的源进行数据交互和资源加载。但是要注意安全风险，确保只允许授权的源进行跨域访问，并对预检请求和携带凭证进行适当的处理。