征服跨域之巅：Ajax、JSONP和CORS的激情交响

前端

2023-03-11 18:04:29

Ajax、JSONP和CORS：跨越网络鸿沟的三座桥梁

在现代网络开发中，跨域通信已成为一项至关重要的技能，它允许网站从外部来源获取数据，并以动态方式更新内容，而无需重新加载整个页面。本文将深入探讨三种广泛使用的跨域技术：Ajax、JSONP和CORS，并帮助您了解它们的优点、缺点和应用场景。

Ajax：非同步通信的先锋

Ajax（异步JavaScript和XML）是异步通信的鼻祖，它允许网页在不刷新整个页面或离开当前页面的情况下与服务器通信。通过XMLHttpRequest对象，Ajax能够在后台获取数据，并在不中断用户体验的情况下更新网页内容。

优点：

无刷新更新页面内容
提高用户交互性
降低服务器负载

代码示例：

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

// 打开一个GET请求
xhr.open('GET', 'data.json');

// 设置响应类型为JSON
xhr.responseType = 'json';

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

// 监听响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理响应数据
    var data = xhr.response;
    // 更新网页内容
  }
};

JSONP：跨域通信的非官方桥梁

JSONP（JSON with Padding）是一种非官方的跨域解决方案，它利用了<script>标签能够跨域加载脚本文件的特性。JSONP的原理是将请求数据封装在回调函数中，并以<script>标签的形式加载，从而绕过同源策略的限制。

优点：

简单易用
不需要服务器端特殊处理

缺点：

只支持GET请求
容易受到JSONP劫持攻击

代码示例：

// 创建`<script>`标签
var script = document.createElement('script');

// 设置回调函数名
var callbackName = 'myCallback';

// 构建JSONP请求URL
var url = 'https://example.com/api/data?callback=' + callbackName;

// 设置`<script>`标签的src属性
script.src = url;

// 将`<script>`标签添加到文档中
document.body.appendChild(script);

// 定义回调函数
function myCallback(data) {
  // 处理响应数据
  // 更新网页内容
}

CORS：官方跨域解决方案的旗帜

CORS（跨域资源共享）是W3C官方颁布的跨域解决方案，它通过新增一系列HTTP首部字段，允许服务器指定哪些源站可以访问哪些资源。与JSONP不同，CORS支持GET和POST请求，并提供更全面的安全保障。

优点：

支持GET和POST请求
安全可靠
不需要客户端特殊处理

缺点：

需要服务器端配置
在IE8及以下版本浏览器中不受支持

代码示例：

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

// 打开一个POST请求
xhr.open('POST', 'https://example.com/api/data');

// 设置响应类型为JSON
xhr.responseType = 'json';

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

// 发送请求
xhr.send(JSON.stringify(data));

// 监听响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理响应数据
    var data = xhr.response;
    // 更新网页内容
  }
};