前端

### Ajax 处理请求跨域问题

Ajax（Asynchronous JavaScript and XML）本身是不支持跨源请求的，这是因为浏览器出于安全考虑实施的同源策略（Same-Origin Policy）。同源策略限制了来自不同源的文档或脚本对当前文档读取或设置某些属性的能力。

不过，有几种方法可以绕过这个限制来实现跨源请求：

1. **JSONP（JSON with Padding）**：这是一种老的技巧，它利用 `<script>`标签不受同源策略限制的特点来进行跨域请求。服务器返回的响应拼接一个函数调用作为JavaScript代码。这种方法的缺点是它只能用于GET请求，并且存在一定的安全隐患。
2. **CORS（Cross-Origin Resource Sharing）**：这是现在推荐的方法，它允许服务器显式地指定哪些源可以访问该服务器上的资源。CORS是一个 W3C 标准，它通过在服务器上设置特定的HTTP头来工作。
3. **代理服务器**：使用一个服务器充当中间人的角色，接受来自客户端的跨源请求，然后转发请求到目标服务器。代理服务器接收到响应后，再将数据返回给客户端。这种方法需要额外的服务器端配置。
4. **WebSockets**: WebSockets提供了一个全双工的通信渠道，可以在浏览器和服务器之间建立持久连接。虽然WebSocket协议与HTTP不同，但它可以绕过同源策略，从而实现跨域通信。

### CORS 设置

当你控制服务器时，可以通过设置HTTP响应头来启用CORS。这些头部主要包括：

1. **Access-Control-Allow-Origin**: 指定了哪些网站可以参与跨域资源共享。例如，设置为 `*`代表允许所有域进行跨域请求，但出于安全考虑通常会指定明确的域名。
2. **Access-Control-Allow-Methods**: 指定了允许的HTTP请求方法，如 `GET, POST, PUT, DELETE, OPTIONS`等。
3. **Access-Control-Allow-Headers**: 在实际请求中允许自定义的HTTP头部字段列表。
4. **Access-Control-Allow-Credentials**: 表示是否允许发送Cookie。如果服务器端设置了这个值为 `true`，那么前端请求的时候也必须将 `withCredentials`属性设置为 `true`。
5. **Access-Control-Expose-Headers**: 允许客户端访问的服务器白名单头部字段。
6. **Access-Control-Max-Age**: 表明在多少秒内，不需要再发送预检验请求（对于某一资源的预检请求结果的有效期）。

下面是一个简单的例子，展示了如何在Node.js的Express框架中设置CORS响应头：

```javascript
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Credentials', true);
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Max-Age', '86400');
    return res.status(200).send();
  }
  next();
});

// 你的其他路由和逻辑

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


Ajax 如何处理请求跨域问题？CORS 如何设置？

Ajax 处理请求跨域问题

CORS 设置