JavaScript高级主题：什么是跨域资源共享（CORS）？

跨域资源共享（CORS） 是一种通过HTTP头来允许在不同源之间进行安全跨域数据访问的机制。由于浏览器的同源策略，通常在跨域请求时会受到限制，CORS 提供了一种标准的方式来让服务器声明哪些来源被允许访问其资源。

CORS 的关键思想是使用 HTTP 头部来传递允许跨域访问的信息。以下是 CORS 的一些关键头部：

1. Origin（请求来源）： 在每个 HTTP 请求头中都包含了一个 Origin 字段，表示请求的来源。

2. Access-Control-Allow-Origin（允许访问的来源）： 服务器通过这个头部告诉浏览器，哪些源是被允许访问资源的。可以是单个源，也可以是用逗号分隔的多个源，甚至可以是通配符 *，表示任何来源。

3. Access-Control-Allow-Methods（允许的请求方法）： 指定了实际请求中允许的方法。例如，GET、POST 等。

4. Access-Control-Allow-Headers（允许的请求头）： 指定了实际请求中允许携带的首部字段。

5. Access-Control-Expose-Headers（允许访问的响应首部）： 指定了哪些首部字段可以作为响应的一部分被访问。

6. Access-Control-Allow-Credentials（是否允许携带身份凭证）： 如果服务器允许请求携带凭证（比如 cookie 或 HTTP 认证信息），则该字段的值设置为 true。

7. Access-Control-Max-Age（预检请求的有效期）： 用于指定本次预检请求的有效期（单位为秒）。

当浏览器检测到跨域请求时，会首先发起一个预检请求（OPTIONS 请求），以确认实际请求是否被允许。如果服务器允许跨域访问，将在实际请求中附带相应的头部信息。

以下是一个简单的 CORS 示例：

// 服务器端设置 CORS 头部
const express = require('express');
const app = express();

app.use((req, res, next) => {
   
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

app.get('/api/data', (req, res) => {
   
    res.json({
    message: 'Data from the server' });
});

app.listen(3000, () => {
   
    console.log('Server is running on port 3000');
});

在上述例子中，服务器设置了允许访问的来源、允许的请求方法、允许的请求头等信息。前端页面通过浏览器发起跨域请求时，如果满足了服务器的跨域规则，就能成功获取到服务器端的数据。