在JavaScript中，跨域是指浏览器从一个域名的网页去请求另一个域名下的资源。由于浏览器的同源策略限制，这种跨域请求通常会被阻止，但在实际开发中，有多种方法可以实现跨域：
JSONP（JSON with Padding）
- 原理：利用
<script>标签不受同源策略限制的特点，通过动态创建<script>标签，将跨域请求的 URL 作为其src属性值，并在 URL 中添加一个回调函数名作为参数。服务器收到请求后，会将数据包装在这个回调函数中返回，浏览器在接收到响应后会自动执行该回调函数，从而实现数据的获取。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP 示例</title>
</head>
<body>
<script>
function handleData(data) {
console.log('获取到的数据：', data);
}
</script>
<script src="https://example.com/api/data?callback=handleData"></script>
</body>
</html>
- 局限性：JSONP 只支持 GET 请求，因为
<script>标签只能用于加载脚本资源，无法发送其他类型的请求。而且 JSONP 需要服务器端的配合，服务器需要按照特定的格式返回数据，即包裹在回调函数中的 JSON 数据。
CORS（Cross-Origin Resource Sharing）
- 原理：CORS 是一种基于 HTTP 头的机制，它允许服务器在响应中设置特定的头信息，以告知浏览器是否允许该跨域请求。浏览器在发送跨域请求时，会自动添加一些额外的头信息，如
Origin头，用于标识请求的来源。服务器根据这些头信息和自身的配置，来决定是否允许该请求，并在响应中设置相应的Access-Control-Allow-Origin等头信息，以告知浏览器是否可以接受该响应。 - 示例：
// 客户端代码
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('获取到的数据：', JSON.parse(xhr.responseText));
}
};
xhr.send();
// 服务器端代码（以 Node.js 为例）
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// 处理请求并返回数据
res.end(JSON.stringify({
data: 'Some data' }));
});
server.listen(3000);
- 优点：CORS 是一种现代的、标准的跨域解决方案，支持多种类型的请求，包括 GET、POST、PUT、DELETE 等，并且可以在服务器端进行更精细的权限控制，安全性相对较高。
代理服务器
- 原理：在同源的服务器上搭建一个代理服务器，客户端先向同源的代理服务器发送请求，代理服务器再将请求转发到目标跨域服务器，并将目标服务器的响应返回给客户端。由于客户端与代理服务器是同源的，不存在跨域问题，从而间接实现了跨域请求。
- 示例：
// 客户端代码
var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy/api/data');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('获取到的数据：', JSON.parse(xhr.responseText));
}
};
xhr.send();
// 代理服务器代码（以 Node.js 为例）
const http = require('http');
const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer();
const server = http.createServer((req, res) => {
if (req.url === '/proxy/api/data') {
proxy.web(req, res, {
target: 'https://example.com/api/data' });
}
});
server.listen(3000);
- 优点：代理服务器方式可以灵活地处理各种跨域请求，并且可以对请求和响应进行额外的处理和控制，如添加认证信息、修改请求头和响应头等。同时，对于一些不支持 CORS 的老旧服务器，通过代理服务器也可以实现跨域访问。
postMessage
- 原理：
postMessage方法允许不同源的窗口之间进行消息传递。通过在源窗口中调用postMessage方法发送消息，并在目标窗口中监听message事件来接收消息，从而实现跨域的数据交互。这种方式通常用于不同源的页面之间的通信，如父子窗口、弹出窗口等。 - 示例：
<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父窗口</title>
</head>
<body>
<iframe id="childFrame" src="https://example.com/child.html"></iframe>
<script>
window.addEventListener('message', function (event) {
if (event.origin === 'https://example.com') {
console.log('从子窗口接收到的数据：', event.data);
}
});
var childFrame = document.getElementById('childFrame');
childFrame.contentWindow.postMessage('Hello from parent', 'https://example.com');
</script>
</body>
</html>
<!-- 子窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子窗口</title>
</head>
<body>
<script>
window.addEventListener('message', function (event) {
if (event.origin === 'https://yourdomain.com') {
console.log('从父窗口接收到的数据：', event.data);
event.source.postMessage('Hello from child', event.origin);
}
});
</script>
</body>
</html>
- 应用场景：适用于不同源的页面之间需要进行简单的数据交互和通信的场景，如跨域的 iframe 之间的协作、多页面应用中的不同页面之间的消息传递等。
以上是几种常见的JavaScript跨域实现方式，每种方式都有其优缺点和适用场景，在实际开发中，需要根据具体的需求和项目情况选择合适的跨域解决方案。
