跨域和jsonp的了解和学习

一、为什么会有跨域问题呢

因为有浏览器的同源策略。

同源：如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫三元)

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

二、跨域

浏览器对于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——《不要再问我跨域的问题了》

三、跨域的解决方法

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——《不要再问我跨域的问题了》

posted @ 2019-05-28 16:20 汪神阅读(295) 评论(0) 编辑收藏举报

刷新页面返回顶部

跨域和jsonp的了解和学习

公告