目录
前言
一、什么是跨域问题？
二、为什么会出现跨域问题？
三、常见的跨域解决方法
1. JSONP（JSON with Padding）
2. CORS（跨域资源共享）
3. 代理服务器
4. postMessage()
前言
跨域是前端开发中经常遇到的一个重要问题。本文将详细介绍什么是跨域问题，为什么会出现跨域问题以及如何解决跨域问题。同时，还将通过代码举例来说明相关概念和解决方法。
一、什么是跨域问题？
跨域问题指的是在浏览器端发送 AJAX 请求时，请求的目标资源位于当前页面所在的域之外的情况。浏览器出于安全考虑，实施了同源策略（Same Origin Policy），即默认情况下不允许跨域请求。
同源策略要求 AJAX 请求的协议、端口和域名必须完全一致，否则就会被当作跨域请求。例如，假设当前页面的 URL 是 http://www.example.com，那么向 http://api.example.com 发送 AJAX 请求就会触发跨域问题。
二、为什么会出现跨域问题？
跨域问题的出现是为了保护用户数据和提高安全性。如果没有同源策略，恶意网站就可以在用户无感知的情况下获取到其他网站的数据，从而造成安全风险。
同源策略限制了跨域请求，但也带来了一些不便。比如，当我们需要从不同的域名获取数据或与其他域名进行通信时，就会面临跨域问题。
三、常见的跨域解决方法
1. JSONP（JSON with Padding）
JSONP 是一种跨域解决方案，它利用 <script> 标签的跨域特性来实现。在服务端将数据包装为回调函数的调用，然后通过动态创建 <script> 标签的方式引入，使得浏览器可以正确解析并执行返回的数据。
// 创建一个script标签
var script = document.createElement('script');
// 设置请求地址
script.src = 'http://example.com/api/data?callback=myCallback';
// 定义回调函数
window.myCallback = function(data) {
console.log(data);
};
// 将script标签添加到文档中
document.body.appendChild(script);在这个例子中，我们通过动态创建script标签，将请求发送到不同的源http://example.com/api/data?callback=myCallback。在服务器端，它会返回一个JSON字符串，其中包含数据和回调函数名。在客户端，当script标签加载完成后，回调函数会被执行，从而获取到服务器返回的数据。
2. CORS（跨域资源共享）
CORS是一种通过浏览器和服务器进行协商的方法，允许不同源的网页之间进行通信。CORS通过在服务器端设置Access-Control-Allow-Origin等响应头来实现跨域。在客户端发送请求时，浏览器会自动携带一些请求头，如Origin等。
服务器根据这些请求头来判断是否允许跨域请求，如果允许，则在响应头中添加Access-Control-Allow-Origin等响应头。客户端在收到响应后，检查响应头中的Access-Control-Allow-Origin等响应头，如果允许跨域请求，则可以获取响应数据。
客户端发送请求时携带Origin头：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.setRequestHeader('Origin', 'http://mywebsite.com');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();服务器端设置响应头允许跨域请求：
Access-Control-Allow-Origin: http://mywebsite.com3. 代理服务器
代理服务器是跨域问题的另一种解决方案。前端应用程序将请求发送给自己的服务器，然后由服务器转发请求到其他域，最后将响应返回给前端。
例如，前端应用程序请求数据的 URL 是 /data，而实际数据位于 http://api.example.com/data。通过代理服务器，可以将前端请求发送到 /api/data，然后代理服务器负责将请求转发到 http://api.example.com/data，并将响应返回给前端。
代理跨域解决方案是最安全的跨域解决方案，它通过设置代理服务器来实现不同源之间的通信。下面是一个使用Node.js创建代理服务器的示例代码：
创建代理服务器：
const http = require('http');
const url = require('url');
const proxy = http.createServer((req, res) => {
let parsedUrl = url.parse(req.url);
let options = {
hostname: parsedUrl.hostname,
port: parsedUrl.port || 80,
path: parsedUrl.path,
method: req.method,
headers: req.headers
};
let proxyReq = http.request(options, (proxyRes) => {
proxyRes.on('data', (chunk) => {
res.write(chunk);
});
proxyRes.on('end', () => {
res.end();
});
});
req.pipe(proxyReq);
proxyReq.pipe(res);
});
proxy.listen(8080);在这个例子中，我们使用Node.js创建了一个HTTP代理服务器，它将在本地的8080端口上监听请求。当客户端发送请求到代理服务器时，代理服务器会将请求的URL解析为对象，然后根据该URL对象创建新的HTTP请求，并将原始请求的请求头和请求体传递给新的HTTP请求。然后，代理服务器将新的HTTP请求发送到目标服务器，并将目标服务器的响应返回给客户端。
使用该代理服务器的示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();在这个例子中，我们将请求发送到本地的8080端口上的代理服务器，然后代理服务器将请求转发到目标服务器，并将目标服务器的响应返回给客户端。由于我们使用了代理服务器，所以可以绕过同源策略的限制，实现跨域。
4. postMessage()
如果前端应用程序需要与嵌入的 iframe 或跨窗口进行通信，可以使用 postMessage() 方法来发送跨域消息。
// 发送消息
otherWindow.postMessage('Hello', 'http://www.example.com');
// 接收消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://www.example.com') {
// 处理接收到的消息
}
});
上述代码中，otherWindow.postMessage() 方法用于向其他窗口发送消息，而 window.addEventListener('message', ...) 用于接收消息，并通过 event.origin 来判断消息来源是否为指定的域。
