前端基础：跨域问题，一文搞定

2023-11-23 06:36:00

在这篇文章中，我们将探讨前端开发中常见的跨域问题，并提供详细的解决方案，帮助你轻松解决跨域限制。

跨域问题的根源

跨域问题源于浏览器的同源策略，该策略限制了不同源的脚本、XMLHttpRequest 和 WebSocket 等操作。同源指的是协议、域名和端口三者完全相同的两个 URL。当跨域请求发生时，浏览器出于安全考虑，会阻止该请求，以防止恶意网站窃取敏感数据。

解决方案

1. CORS（跨域资源共享）

CORS 是一种基于 HTTP 头的机制，允许不同源的资源在服务器端配置安全地共享。它需要服务器端和客户端同时支持。

2. JSONP

JSONP（JSONP with Padding）是一种利用<script>标签的技巧。它通过动态创建<script>标签，将数据作为函数参数返回，从而绕过同源限制。

3. 代理

代理服务器可以充当中间人，将跨域请求转发到目标服务器。它允许客户端绕过同源策略，向目标服务器发送请求。

4. CORS 预检请求

对于需要携带凭证的跨域请求（例如包含 Cookie 或 HTTP 授权信息的请求），浏览器会先发送一个预检请求（OPTIONS 请求）到服务器，以询问服务器是否允许该请求。

5. 服务器端配置

服务器端需要配置 CORS 头，以允许客户端跨域访问资源。主要有以下几个头：

Access-Control-Allow-Origin：指定允许跨域访问的源。
Access-Control-Allow-Credentials：指定是否允许携带凭证的跨域请求。

选择合适的解决方案

不同的解决方案适用于不同的情况：

CORS：推荐用于服务器端和客户端都支持的情况。
JSONP：适合服务器端不支持 CORS 但客户端支持 JavaScript 的情况。
代理：适用于服务器端和客户端都不支持 CORS 的情况。

实例

使用 CORS 允许跨域请求：

// 客户端
const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api');
request.withCredentials = true;
request.send();

// 服务器端（使用 Node.js）
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true');

使用 JSONP 绕过同源限制：

// 客户端
const callbackName = 'myCallback';
const script = document.createElement('script');
script.src = `https://example.com/api?callback=${callbackName}`;
document.body.appendChild(script);

// 服务器端（使用 PHP）
echo json_encode(['name' => 'John Doe']);

使用代理转发跨域请求：

// 客户端
const proxyUrl = 'https://myproxy.com';
const request = new XMLHttpRequest();
request.open('GET', `${proxyUrl}/https://example.com/api`);
request.send();