跨域和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——《不要再问我跨域的问题了》
最新文章
- Java 8五大主要功能为开发者提供了哪些便利?
- laravel5 数据库配置(MySQL)
- Data import/export of Netezza using external table
- url 处理
- PHP面向对象常见的关键字和魔术方法
- 织梦(dedecms) 5.7 /plus/car.php sql注入0day
- winform之自定义控件
- Jenkins api java 调用
- C语言的本质(15)——C语言的函数接口入门
- select_related
- UNIX网络编程卷1 server程序设计范式7 预先创建线程,以相互排斥锁上锁方式保护accept
- 机器学习:python中如何使用朴素贝叶斯算法
- JAVA中LOCK
- 使用Git上传项目到Gitee
- vue route
- Java开发学习教程之对象的创建与使用
- Webpack打包方式及各场景下模块化语法总结
- 收集了一些python的文章
- POJ 3280 Cheapest Palindrome(区间DP求改成回文串的最小花费)
- IDEA 破解图文教程 - 2018.9 更
热门文章
- [转]Google开源Leak Finder—用于检测内存泄漏的JavaScript工具-----可惜,暂时打不开google的网站,下载不了
- 洛谷【P1080】国王游戏
- bzoj 3144 切糕 —— 最小割
- C#设计模式(12)——享元模式
- C语言学习笔记--C语言中变量的属性关键字
- javaScript之跨浏览器的事件对象
- .net开发ActiveX控件
- 《精通Spring4.X企业应用开发实战》读后感第五章(通过编码方式动态添加Bean)
- 6.2 卸载原来的Ubuntu,重新安装Ubuntu
- idea中java项目增加module后,增加的目录(src)无法增加包(Package)