JavaScript 跨域调用详解217

跨域调用，是指从一个域名的网页代码中，向另一个域名的服务器发送请求。如果两个域名不相同，就会产生跨域问题，浏览器出于安全考虑会进行限制。

JavaScript 跨域调用主要有以下几种实现方式：

1. JSONP

JSONP（JSON with Padding）是一种非标准的跨域技术。它利用了 <script> 标签不限制跨域加载的特性。具体步骤如下：
请求方生成一个唯一的回调函数名。
请求方构造一个 URL，其中包含回调函数名和服务器端返回的 JSON 数据。
请求方将 <script> 标签指向该 URL，加载 JSON 数据。
服务器端将 JSON 数据返回给回调函数，并在回调函数中处理数据。

例如：```html
// 请求方
const callbackName = 'myCallback';
const url = `/api?callback=${callbackName}`;
const script = ('script');
= url;
(script);
// 服务器端
// 获取回调函数名
const callback = ;
// 组装 JSON 数据
const data = { message: 'Hello World' };
// 返回 JSON 数据
(`${callback}(${(data)})`);
```

2. CORS

CORS（跨域资源共享）是 W3C 标准化的跨域请求规范。它允许客户端在浏览器中向其他域名的服务器发送跨域请求，并允许服务器端设置响应头来控制对请求的访问。

CORS 请求需要使用 XMLHttpRequest 发起，服务器端需要在响应头中设置以下字段：* Access-Control-Allow-Origin：指定允许跨域请求的域名。
* Access-Control-Allow-Methods：指定允许跨域请求的 HTTP 方法。
* Access-Control-Allow-Headers：指定允许跨域请求的请求头。

例如：```html
// 请求方
const request = new XMLHttpRequest();
('GET', '/api');
();
// 服务器端
('Access-Control-Allow-Origin', '');
('Access-Control-Allow-Methods', 'GET, POST');
('Access-Control-Allow-Headers', 'Content-Type');
```

3. WebSocket

WebSocket 是基于 TCP 协议的双向通信技术。它可以在客户端和服务器端之间建立全双工的通信通道，实现实时数据传输。

WebSocket 既可以用于跨域通信，也可以用于同源通信。它不需要像 CORS 那样在服务器端设置响应头，并且可以支持二进制数据传输。

例如：```javascript
// 请求方
const socket = new WebSocket('wss:///api');
= () => { ('Hello World'); };
= (event) => { (); };
// 服务器端
const server = require('ws');
const wss = new ({ port: 8080 });
('connection', (ws) => { ('Hello World'); });
```

4. 代理

代理是一种转发请求的技术。通过使用代理，可以将跨域请求转发到同源服务器，再由同源服务器向目标服务器发送请求。

代理可以是独立的服务器，也可以是浏览器插件或扩展。其中，最常用的浏览器代理是 CORS Proxy。

例如：```html
// 请求方
const proxyUrl = '/';
const finalUrl = '/api';
const request = new XMLHttpRequest();
('GET', `${proxyUrl}?url=${finalUrl}`);
();
// 代理服务器
// 转发请求
const targetUrl = ;
const request = new XMLHttpRequest();
('GET', targetUrl);
();
// 返回响应
();
```

5. iframe

iframe 是一种嵌入子页面的 HTML 元素。通过 iframe，可以将来自不同域名的页面嵌入到当前页面中。

iframe 可以用于跨域调用，但它也有以下限制：* 无法访问父页面中的 DOM。
* 无法使用 XMLHttpRequest 或 WebSocket 等技术进行跨域请求。

例如：```html
// 请求方
const iframe = ('iframe');
= '/api';
(iframe);
// iframe 中的服务器端代码
// 获取父页面中的 DOM 元素
const parentElement = ('element');
```

选择合适的跨域调用方式

在实际开发中，选择合适的跨域调用方式需要根据具体需求考虑以下因素：* 浏览器兼容性：CORS 兼容性较好，而 JSONP、WebSocket 和代理对某些老版本浏览器可能不支持。
* 数据传输量：JSONP 和 iframe 适用于传输少量数据，而 CORS 和 WebSocket 适用于传输大数据量。
* 实时性要求：WebSocket 适用于需要实时数据传输的场景。
* 安全性要求：CORS 是最安全的跨域调用方式，而 JSONP、iframe 和代理的安全性较弱。

2025-02-15

上一篇：JavaScript 解释器：理解代码执行的神秘流程

下一篇：JavaScript 按位或 (|) 运算符