web跨域之JSONP

现代浏览器在安全为前提下，由望京公司在浏览器中引入同源策略，同源策略在一定程度上能够提高网络安全性，但是有利有弊，也在一定程度上限制了网络资源的共享

同源策略：

1.交互协议相同：同为http或https或其他协议

2.域名相同：指完整域名相同，只是顶级域名相同并不行

3.端口相同：必须在同一端口下如同为80端口

在开发过程中多少会遇到跨域的问题，解决跨域常见的方法之一是JSONP方式，在jQuery中可以很方便的使用JSONP，那么JSONP的原理是什么呢

在代码中直接访问非同源的资源会被浏览器限制，但是通过script等标签访问却没有这个限制，而JSONP正是利用此原理实现跨域访问的

1.创建一个script标签

2.标签地址附加callback参数信息

3.将标签插入HTML文档中

4.在callback指定的回调中访问相关数据

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

在请求成功后会立即调用callback指定的函数（该函数存在的情况下）

此方法比较通用，无需服务器配置或额外做协同处理，但是也有一定的缺点

JSONP只能够使用GET方法，并不能使用POST、HEAD等

参考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html