使用JavaScript 实现各种跨域的方法

2023年5月27日上午11:00 • JavaScript

使用JavaScript实现跨域的方法通常分为以下几种：

1. JSONP

JSONP（JSON with Padding）是在跨域访问时比较流行的一种方式，它不是通过XHR请求数据，而是利用 <script> 标签可以访问不同域名下的资源的特性来实现。

实现原理

在A域下使用script标签请求B域下的数据：

<script src="http://b.com/data?callback=dataHandler"></script>

B域下的数据返回一个函数调用：

dataHandler({
    name: 'Lucy',
    age: '23'
});

由于请求的是一个js文件，因此B域下的数据必须包裹在函数调用中，所以服务端接收到请求后，返回一个callback的参数名和要返回的数据作为这个callback函数的参数来调用它。

优点

简单易用，兼容性好；
可以在浏览器端、服务器端都使用。

缺点

只能用于GET请求；
可能会被恶意使用，存在安全性问题；
由于是通过<script>标签加载，因此无法直接访问JSON数据（比如无法得到HTTP状态码）。

2. CORS

CORS（Cross-Origin Resource Sharing）是一个W3C标准，它允许在浏览器上，向跨源服务器发送XMLHttpRequest而不受同源策略限制。

实现原理

在服务端设置以下响应头：

Access-Control-Allow-Origin: http://a.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type
Access-Control-Allow-Credentials: true

浏览器会自动先发送一个OPTIONS请求询问服务器是否支持跨域，如果服务器响应正确的响应头，那浏览器就会发送正常的请求。

优点

可以支持跨域的AJAX请求；
安全性更高。

缺点

需要服务器支持，且设置较为麻烦。

3. postMessage

该方法可以在不同的窗口、甚至不同的文档中传递数据信息，也可以完成跨域数据通信。

实现原理

// 在A域下
var frame = document.createElement('iframe');
frame.src = 'http://b.com';
document.body.appendChild(frame);

frame.onload = function() {
  frame.contentWindow.postMessage('Hello, B!', 'http://b.com');
}

// 在B域下
window.addEventListener('message', function (event) {
  if (event.origin !== 'http://a.com') return;

  console.log(event.data); // Hello, B!
});

在A域下，创建一个iframe并设置src属性为B域的地址，然后通过在iframe的onload事件中通过contentWindow.postMessage()方法给B域发送数据。在B域中，监听window对象的message事件，在事件触发时可以通过event参数获取到数据。