1.背景介绍
什么算是同源？
同一协议，同一域名，同一端口
举例来说，http://www.example.com/dir/page.html这个网址，协议是http://， 域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下：
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
请求不同‘源’的数据就算是跨域。
2.知识剖析
JSONP就是为了便于客户端使用数据，
逐渐形成了的一种非正式传输协议，人们把它称作JSONP
3.常见问题
JSONP实现跨域原理?
代码中如何实现?
4.解决方案
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。 JSONP实现跨域请求的原理简单的说，就是动态创建'script'标签，然后利用'script'的src 不受同源策略约束来跨域获取数据。 JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
5.编码实战
第一种
直接添加标签
直接添加一个标签并且设置好回调函数，这样就可以获得数据，但是很危险；
第二种
jquery封装
jquery封装的ajax请求就有这种jsonP的方式，但是需要注意的是，虽然我们有一个回调函数名，但是我们并没有写这个回调函数的方法，因为jquery会自动帮你建立一个这样的回调函数，直接整合在success中，这样就很方便了；
jquery简写
另外就是这种简写方式了，直接封装好了，异常方便。
6.扩展思考
JSONP跨域有什么优缺点？
优点：兼容性很好好，可以在古老的浏览器中运行，
缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求。
7.参考文献
参考一 : 好评率超高的博客文章
参考二 : 软某峰—浏览器同源政策及其规避方法
8.更多讨论
一.还有什么跨域方法呢？
1.另外还有服务器代理跨域，比如nginx反向代理跨域;
跨域属于浏览器策略，反向代码不通过浏览器，也就没跨域问题
server {
listen81;
server_name www.domain1.com
;location / {
proxy_pass http://www.domain2.com:8080;#反向代理
proxy_cookie_domain www.domain2.com www.domain1.com;#修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com;#当前端只跨域不带cookie时，可为*
add_header Access-Control-Allow-Credentialstrue;
}
}
2.CORS
全称Access-Control-Allow-Origin，需要在服务端设置，前端则无需设置；
网友评论