JSONP跨域模拟百度搜索

JSONP（JSON with Padding）是一种基于Script标签的跨域数据请求方式。它通过在页面中动态添加一个script标签，指向一个跨域的URL地址，后端接口返回的数据将会自动被包裹在回调函数中返回给前端的Script标签，从而实现跨域数据请求。

下面以模拟百度搜索接口为例，详细讲解JSONP跨域的实现过程：

1. 首先，我们需要在页面中动态添加一个script标签，使用百度搜索接口URL地址作为其src属性值。需要注意的是，在URL地址后面需要加上一个callback参数，并且该参数的值必须为一个前端定义的回调函数名，该回调函数用于接收后端返回的数据。

function handleData(data) {
  console.log(data);
}

var scriptEle = document.createElement('script');
scriptEle.src = 'https://www.baidu.com/su?wd=jsonp&cb=handleData';
document.body.appendChild(scriptEle);

1. 后端接口需要接收callback参数，并将数据以JSON格式返回。在返回的数据中，需要将JSON对象包裹在前端定义的回调函数名中。

var cb = req.query.cb;
var keyword = req.query.wd;
var data = {
  result: ['jsonp', 'jsonpp', 'jsonp2']
};

res.send(cb + '(' + JSON.stringify(data) + ')');

通过以上两个步骤的实现，我们便可以成功请求到跨域的百度搜索接口数据，并将其展示在前端页面中。

另外，以下是一些关于JSONP实现的注意事项：

1. 需要将接收数据的回调函数名传递到后端并处理。
2. 后端返回的数据需要 JSON 格式包裹所定义的回调函数名以实现前端接收数据。
3. JSONP跨域请求仅能使用GET方法，因为Script标签的请求方式仅支持GET。