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

因为有浏览器的同源策略

同源:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的。我们也可以把它称为“协议/主机/端口 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——《不要再问我跨域的问题了》

跨域和jsonp的了解和学习的更多相关文章

  1. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  2. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  3. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...

  4. jquery跨域解决方案JSONP

    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...

  5. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. JS跨域:jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  7. 【记录】ajax跨域问题jsonp正确的使用方式

    最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...

  8. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

  9. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

随机推荐

  1. 在Eclipse中用JDBC连接Mysql数据库

    一.配置要求 JDK(下载http://www.oracle.com/technetwork/java/javase/downloads/index.html) Mysql(下载http://www. ...

  2. 机器学习:scikit-learn中算法的调用、封装并使用自己所写的算法

    一.scikit-learn库中的kNN算法 scikit-learn库中,所有机器学习算法都是以面向对象的形式进行包装的: 所有scikit-learn库中机器学习算法的使用过程:调用.实例化.fi ...

  3. 愚人的linux内核2440移植札记(超曲折版)

    http://blog.csdn.net/dreambegin/article/details/6904822 原来文章叫--编译内核之初体验.后来想了想,这篇文章让我体验了好多遍.不该叫这么大气的名 ...

  4. PHP7三元运算符 ?? 和 ?: 的区别

    1. (expr1) ?? (expr2)  是 PHP7才有的功能,等同于: isset(expr1) ? expr1 : expr2 ; 2.(expr1) ?: (expr2) 是PHP5.3才 ...

  5. List for game to play latter

    1.The Elder Scrolls V 2.Border Lands 1,2 3.Mind Killer 4.Dark Soul 2 5.Watch Dog 6.Valkyria Chronicl ...

  6. JVM优化(未完)

    -XX:+PrintGC 在eclipse控制台打印简单的GC信息,与-verbose:gc一样 -verbose:gc 在eclipse控制台打印简单的GC信息 -XX:+PrintGCDetail ...

  7. Python实现R包brainwaver中的compute.FDR函数

    FDR(false discovery rate),是统计学中常见的一个名词,翻译为伪发现率,其意义为是 错误拒绝(拒绝真的(原)假设)的个数占所有被拒绝的原假设个数的比例的期望值. compute. ...

  8. java之格式化输出

    参考http://how2j.cn/k/number-string/number-string-foramt/320.html#nowhere 格式化输出 如果不使用格式化输出,就需要进行字符串连接, ...

  9. 整数划分——真正的递归经典例题(NYOJ——90)

    先注明学习博客的地址:(http://www.cnblogs.com/hoodlum1980/archive/2008/10/11/1308493.html) 题目描述:任何正整数n都可以写成n=n1 ...

  10. nginx配置同一域名下,共存2个nodejs项目

    项目背景: 1.官网需要改版,使用nodejs nuxt框架进行重构 2.官网改版没有全部完成.但需要上线首页 项目需求: 1.让首页内容显示为新项目 2.让老官网的内容可以被访问到(比如www.n. ...