如何用jsonp解决跨域问题

jsonp解决跨域问题:
利用script标签没有跨域限制的漏洞，网页可以拿到从其他来源产生动态JSON数据，当然了JSONP请求一定要对方的服务器做支持才可以。

「与AJAX对比」

JSONP和AJAX相同，都是客户端向服务器发送请求，从服务器获取数据的方式。但是AJAX属于同源策略，JSONP属于非同源策略(跨域请求)

「JSONP优点」

兼容性比较好，可用于解决主流浏览器的跨域数据访问的问题。缺点就是仅支持get请求，具有局限性，不安全，可能会受到XSS攻击。

「思路👇」

创建script标签
设置script标签的src属性，以问号传递参数，设置好回调函数callback名称
插入html文本中
调用回调函数，res参数就是获取的数据

let script = document.createElement('script');

script.src = 'http://www.baidu.cn/login?username=TianTianUp&callback=callback';

document.body.appendChild(script);

function callback(res) {
   console.log(res);
}

当然，jquery也支持jsonp的实现方式

$.ajax({
  url: 'http://www.baidu.cn/login',
  type: 'GET',
  dataType: 'jsonp', //请求方式为jsonp
  jsonpCallback: 'callback',
  data: {
    "username": "Nealyang"
  }
})

「JSONP优点」

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
并且在请求完毕后可以通过调用callback的方式回传结果。
「JSONP缺点」

它只支持GET请求而不支持POST等其它类型的HTTP请求
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题