使用jsonp完美解决跨域问题

使用 JSONP (JSON with Padding) 是一种解决跨域问题的常见方式。下面是使用 JSONP 完美解决跨域问题的攻略。

什么是JSONP（跨域协议）

JSONP 是利用script标签跨域的一个技巧。简单地说，就是通过动态创建 script 标签，向其他域请求数据，该域返回数据时会调用一个 callback 函数，一般在前端代码中定义。

使用JSONP（跨域协议）的步骤

1. 向其他域请求数据；

2. 该域将数据封装在一个函数中，函数名为前端代码中定义的 callback 函数名，并返回；

3. 在前端代码中定义一个 callback 函数，函数参数就是从其他域返回的数据。

示例1：使用百度地图API获取城市坐标

下面是使用百度地图 API 的例子：

// 百度地图API的地址，callback参数为前端定义的回调函数名
var url = 'http://api.map.baidu.com/geocoder/v2/?ak=您的密钥&callback=showLocation';

// 创建一个script标签
var script = document.createElement('script');

// 设置 script 的 src 属性，并将 script 标签添加到 DOM 中
script.src = url;
document.body.appendChild(script);

// 在前端代码中定义的回调函数
function showLocation(data) {
  console.log(data.result.location);
}

在这个例子中，我们创建了一个百度地图 API 的请求，并在参数中设置了 callback，callback 的值为前端代码中定义的回调函数名 showLocation。

创建 script 标签，并将 src 设置为请求的 URL。把 script 标签添加到页面中后，浏览器就会发送请求，同时执行 showLocation 函数，其中 data 参数就是从其他域返回的数据。在 showLocation 函数中，我们可以对返回的数据进行处理。

示例2：使用淘宝IP地址库获取访问者IP信息

下面是使用淘宝IP地址库的例子：

// 淘宝IP地址库的地址，callback参数为前端定义的回调函数名
var url = 'http://ip.taobao.com/service/getIpInfo.php?ip=59.108.121.217&callback=getIpAddress';

// 创建一个script标签
var script = document.createElement('script');

// 设置 script 的 src 属性，并将 script 标签添加到 DOM 中
script.src = url;
document.body.appendChild(script);

// 在前端代码中定义的回调函数
function getIpAddress(data) {
  console.log(data.data.city);
}

在这个例子中，我们创建了一个淘宝IP地址库的请求，并在参数中设置了 callback，callback 的值为前端代码中定义的回调函数名 getIpAddress。

创建 script 标签，并将 src 设置为请求的 URL。把 script 标签添加到页面中后，浏览器就会发送请求，同时执行 getIpAddress 函数，其中 data 参数就是从淘宝IP地址库返回的数据。在 getIpAddress 函数中，我们可以对返回的数据进行处理。

总结

使用 JSONP 可以解决跨域问题。在使用 JSONP 时，后端返回的内容必须是一段可执行的 JavaScript 代码，并且使用前端代码中定义的回调函数名来封装 JSON 数据。在前端代码中创建一个 script 标签，并将其添加到 DOM 中，浏览器就会发送请求，同时运行前端代码中定义的回调函数，并传入从其他域返回的 JSON 数据作为参数。