一文读懂跨域七大解决方案（图文解析）

2023-11-29 06:32:40

征服浏览器跨域限制：七种解决方案

跨域限制在Web开发中是一个普遍存在的难题，阻碍着不同源的网页访问彼此的资源。然而，通过巧妙的解决方案，我们可以突破这些限制，释放Web开发的全部潜力。以下七种方法将为你提供全面指南，助你解决跨域难题。

XMLHttpRequest：服务器端支持不可或缺

XMLHttpRequest (XHR) 是浏览器原生对象，专用于跨域通信。它允许异步发送请求，但需要服务器端的合作。服务器必须设置 "Access-Control-Allow-Origin" 头，指定允许跨域访问的域名。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求参数
xhr.open('GET', 'https://example.com/api/data');

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send();

JSONP：脚本标签的跨域妙计

JSONP (JSON with Padding) 利用<script>标签的特性，实现了跨域请求。通过将回调函数作为URL参数传递，它将请求转换为一个JSONP请求。服务器返回包含回调函数调用的JSONP响应，浏览器解析并执行该回调函数。

// 创建JSONP请求
var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=myCallback';
document.body.appendChild(script);

// 定义回调函数
function myCallback(data) {
  // 处理服务器响应
}

CORS：跨域通信标准

CORS (Cross-Origin Resource Sharing) 是一项W3C标准，旨在允许不同源的网页相互请求资源。它通过请求头中的 "Origin" 头告知服务器请求的来源。服务器必须设置 "Access-Control-Allow-Origin" 头，指定允许跨域访问的域名。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求参数
xhr.open('GET', 'https://example.com/api/data');

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Origin', 'https://mydomain.com');

// 发送请求
xhr.send();

Access-Control-Allow-Origin：服务器端的许可

"Access-Control-Allow-Origin" 是服务器端的HTTP头，用于指定允许跨域访问的域名。它可以设置多个值，以允许来自不同域名的跨域请求。

Access-Control-Allow-Origin: https://example.com

iframe：嵌套网页的跨域突破

iframe (inline frame) 是一个HTML元素，可以将另一个网页嵌入到当前网页中。它可以在跨域情况下加载资源，但需要服务器端的支持。服务器必须设置 "Access-Control-Allow-Origin" 头，指定允许跨域访问的域名。

<iframe src="https://example.com/api/data"></iframe>

WebSocket：双向通信的跨域桥梁

WebSocket是一种双向通信协议，允许浏览器与服务器建立全双工通信通道。它可以在跨域情况下通信，但需要服务器端的支持。服务器必须设置 "Access-Control-Allow-Origin" 头，指定允许跨域访问的域名。

// 创建WebSocket连接
var ws = new WebSocket('wss://example.com/api/data');

// 监听消息事件
ws.onmessage = function (event) {
  // 处理服务器发送的消息
};

// 发送消息
ws.send('Hello from the client!');

代理服务器：跨域请求的中间人

代理服务器是一种转发请求的服务器，位于浏览器和服务器之间，充当中间人。它可以在跨域情况下发送请求，并返回服务器的响应。

// 使用代理服务器发送跨域请求
fetch('https://example.com/api/data', {
  mode: 'no-cors',
  headers: {
    'Origin': 'https://mydomain.com'
  }
})
.then(response => response.json())
.then(data => console.log(data));