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

因为有浏览器的同源策略

同源:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的。我们也可以把它称为“协议/主机/端口 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. UE3代码阅读需知

    转自:http://www.cnblogs.com/hmxp8/archive/2012/02/21/2361211.html 掌握一款庞大的引擎,要一下子掌握真的很难,慢慢地从Editor,Scri ...

  2. 都是stm32的JTAG引脚惹的祸

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/category/6094215 最近在调试08接口的LED显示屏,使用的是自己做的STM32板子. ...

  3. 【转】深刻理解render 和 redirect_to

    由于最近老是在表单提交后出现没有反应的现象,发现是在action中的使用render 和 redirect_to的原因,于是就想搞清楚他两真正的区别在哪里,上一遍的blog也谈到了这二者的区别,但是有 ...

  4. js---数组习题---

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使用TRY CATCH进行SQL Server异常处理

    TRY...CATCH是Sql Server 2005/2008令人印象深刻的新特性.提高了开发人员异常处理能力.没有理由不尝试一下Try.. Catch功能. *      TRY 块 - 包含可能 ...

  6. CentOS 配置RDP

    XRDP服务器 CentOS安装XRDP实现远程桌面访问: 由于安装的是远程桌面,因此需要安装桌面显示服务:# yum install vnc-server 下面开始配置XRDP服务 l  配置环境: ...

  7. last 列出登入系统的用户相关信息

    Linux last 命令介绍 功能说明:列出目前与过去登入系统的用户相关信息. 语法:    last [-adRx][-f <记录文件>][-n <显示列数>][帐号名称. ...

  8. elasticsearch2.x插件之一:marvel(简介)

    在 安装插件的过程中,尤其是安装Marvel插件遇到了很多问题,又要下载license.Marvel-agent,又要下载安装Kibana,很多内容 不知道为何这样安装处理.仔细看了看ElasticS ...

  9. 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

    1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...

  10. CODING 代码托管架构升级之路

    本文为 CODING 创始团队成员王振威在『CODING 技术小馆:上海站』的演讲实录. CODING 技术小馆,是由国内专业的一站式软件服务平台 CODING 主办的一系列技术沙龙.将邀请数位业内知 ...