跨域和jsonp的了解和学习

1、为何会有跨域问题呢

由于有浏览器的同源策略。

同源：若是两个页面的协议，端口（若是有指定）和主机都相同，则两个页面具备相同的源。咱们也能够把它称为“协议/主机/端口 tuple”，或简单地叫作“tuple". ("tuple" ，“元”，是指一些事物组合在一块儿造成一个总体，好比（1，2）叫二元，（1，2，3）叫三元)

缘由就出在浏览器上，为何浏览器要这样作呢？同源策略限制了从一个源加载的文档或者脚本如何与另外一个源的资源进行交互。这是个用于隔离潜在恶意文件的重要机制。

 

2、跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(由于a.cn和b.cn是不一样域),因此跨域就出现了.

看个例子：

好比:我在本地上的域名是study.cn,请求另一个域名一段数据

 

这个就是同源策略的保护,若是浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

 

study.cn/json/jsonp/jsonp.html
请求地址	形式	结果
http://study.cn/test/a.html	同一域名,不一样文件夹	成功
http://study.cn/json/jsonp/jsonp.html	同一域名,统一文件夹	成功
http://a.study.cn/json/jsonp/jsonp.html	不一样域名,文件路径相同	失败
http://study.cn:8080/json/jsonp/jsonp.html	同一域名,不一样端口	失败
https://study.cn/json/jsonp/jsonp.html	同一域名,不一样协议	失败

 

 

 

 

 

 

 

这里也能够参考这篇：https://www.cnblogs.com/chenshishuo/p/4919224.html（上面的表格和图片都是来自这篇博客）——《关于跨域,以及跨域的几种方式》

 

还有更多关于跨域和同源策略的概念——https://segmentfault.com/a/1190000015597029——《不要再问我跨域的问题了》

 

 

3、跨域的解决方法

1. JSONP

个人理解就是几个：

1. 咱们在调用js文件的时候又不受跨域影响,好比引入jquery框架的,或者是调用相片的时候;      并且凡是拥有scr这个属性的标签均可以跨域例如<script><img><iframe>

2. 一个callback传参数的思想，大概就是在请求页面那里有个函数，样子大概就function ddd(data){xxxx}，而后利用js的src请求服务端的时候，用callback参数告诉服务端这个ddd函数，而后服务端调用这个ddd，并把它要的参数传进去，这样数据就以json的方式传过去辽。

 

具体的能够看看这篇文章：https://blog.csdn.net/u010758410/article/details/80990706——《jsonp原理详解——终于搞清楚jsonp是啥了》

 

 

2. 利用jQuery来实现

能够理解成jQuery把JSONP这种思想和ajax结合在一块儿了

$.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });

 

 

 

3. 还有个经过iFrame的

emmm这个没怎么看，仍是看这篇吧：https://www.cnblogs.com/chenshishuo/p/4919224.html——《关于跨域,以及跨域的几种方式》

 

 

4. 还有个利用CORS的

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它容许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS须要浏览器和服务器同时支持。它的通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。

所以，实现CORS通讯的关键是服务器。只要服务器实现了CORS接口，就能够跨源通讯。

 

其余能够参考：https://www.cnblogs.com/cityspace/p/6858969.html——《CORS(跨域资源共享)》

或者这篇也有：https://segmentfault.com/a/1190000015597029——《不要再问我跨域的问题了》