实现跨域访问的几种方式

# 1.1 同源策略

同源策略是浏览器的一种安全策略，限制一个源（协议 + 域名 + 端口）的文档或脚本与另一个源的资源进行交互。主要用于防止恶意网站利用用户当前登录状态进行 CSRF 攻击。如果两个 URL 的协议、域名和端口都相同，则认为它们同源，否则就是跨域。跨域请求会受到浏览器的限制，例如 AJAX、Cookie、LocalStorage 等在跨域请求中受到同源策略限制。通过跨域解决方案如 CORS、JSONP、代理服务器等方式可以规避同源策略带来的限制，实现不同源之间的通信。在跨域处理中，了解同源策略的工作原理和限制是至关重要的。

# 2. **常见跨域场景**

跨域访问是 Web 开发中常见的问题，本章将介绍跨域场景下的解决方案，包括跨域 Ajax 请求和跨域资源共享。

#### 2.1 跨域 Ajax 请求

跨域 Ajax 请求是指浏览器发起的跨域请求，常见的解决方案包括 JSONP、CORS 和代理服务器。

##### 2.1.1 JSONP

JSONP 是一种利用 `<script>` 标签实现跨域请求的技术。它通过动态创建 `<script>` 标签，实现跨域数据的传输。下面是 JSONP 的一个示例：

function handleResponse(data) {
    console.log('Response data:', data);
}

const script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);

在上述代码中，当服务端返回数据时，会执行 `handleResponse` 函数来处理响应数据。

##### 2.1.2 CORS

跨域资源共享（CORS）是一种官方标准，允许服务器在响应中设置特定的 HTTP 头部，从而允许跨域请求。开发者无需使用特殊的方法，而是在服务器端进行设置。

// 在服务器端设置允许跨域访问
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
response.setHeader('Access-Control-Allow-Headers', 'Content-Type');

##### 2.1.3 代理服务器

代理服务器是指在同域下部署一个中间层服务器来转发请求，避免跨域问题。前端代码向代理服务器发起请求，代理服务器再将请求发送给真正的目标服务器，再将结果返回给前端。

代理服务器可以使用 Nginx 或者 Node.js 搭建，通过配置实现请求转发。

#### 2.2 跨域资源共享

跨域资源共享（CORS）是一种现代浏览器支持的机制，允许跨域请求的有效控制。它包括请求头配置、响应头配置、预请求和附加认证信息的处理。

##### 2.2.1 请求头配置

客户端在发送跨域请求时，会携带一些自定义的请求头。服务器端需要在响应中添加允许的请求头信息。

response.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

##### 2.2.2 响应头配置

服务器端需要在响应中添加允许跨域请求的头信息，告诉浏览器可以接受跨域请求。

response.setHeader('Access-Control-Allow-Origin', 'http://example.com');
response.setHeader('Access-Control-Allow-Credentials', 'true');

##### 2.2.3 预请求和附