AJAX 指定多个子域名的访问控制来源

在本文中，我们将介绍如何通过AJAX指定多个子域名的访问控制来源（Access Control Origin）。

阅读更多：AJAX 教程

什么是Access Control Origin（访问控制来源）？

Access Control Origin（ACO）是浏览器的一个安全机制，用于限制跨域请求。当浏览器接收到一个AJAX请求时，会检查请求的源（Origin）是否在服务器允许的访问控制来源列表中。如果不在列表中，则浏览器会拦截请求，返回一个错误。

单一子域名的访问控制来源

默认情况下，浏览器只允许同源请求（即源与目标URL具有相同的协议、域名和端口）。但在实际开发中，有时我们需要允许来自其他子域名的请求。

例如，我们有一个网站example.com，其中有一个子域名为api.example.com，我们希望从子域名发起的AJAX请求可以被允许。

在服务器端，你可以通过设置响应头部来指定访问控制来源：

res.setHeader('Access-Control-Allow-Origin', 'http://api.example.com');

这样，只有来自http://api.example.com的请求才会被允许。

指定多个子域名的访问控制来源

有时候，我们希望允许多个子域名发起请求，而不是只有一个。

在服务器端，你可以通过设置响应头部来指定多个访问控制来源：

res.setHeader('Access-Control-Allow-Origin', 'http://sub1.example.com,http://sub2.example.com,http://sub3.example.com');

这样，来自http://sub1.example.com、http://sub2.example.com和http://sub3.example.com的请求都会被允许。

动态指定访问控制来源

上述的方式指定的访问控制来源是静态的，如果子域名发生变动，需要手动修改服务器的响应头部。

为了更灵活地指定访问控制来源，你可以在服务器端判断请求的源，然后根据不同的子域名动态设置响应头部。

以下是一个示例代码片段：

// 获取请求的源
const origin = req.headers.origin;
// 判断子域名
if (origin === 'http://sub1.example.com') {
  res.setHeader('Access-Control-Allow-Origin', 'http://sub1.example.com');
} else if (origin === 'http://sub2.example.com') {
  res.setHeader('Access-Control-Allow-Origin', 'http://sub2.example.com');
} else if (origin === 'http://sub3.example.com') {
  res.setHeader('Access-Control-Allow-Origin', 'http://sub3.example.com');
} else {
  // 默认设置为不允许跨域请求
  res.setHeader('Access-Control-Allow-Origin', 'null');
}

通过这种方式，你可以根据子域名动态设置访问控制来源。