在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题,
但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了??
下面是代码
谷歌浏览器
火狐浏览器
1、为什么会跨域?
要回答跨域,首先要从头来讲。浏览器本身存在同源策略。以下理解是我整理网上的总结。
协议,域名,端口相同,视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源。这种安全限制称为同源策略。
同源策略保证了资源的隔离。一个网站的脚本只能访问自己的资源,就像操作系统里进程不能访问另一个进程的资源一样,如果没有同源策略,你在网站浏览,跳转其他网页,然后这个网页就可以跨域读取你网站中的信息,这样整个Web世界就无隐私可言了。这就是同源策略的重要性,它限制了这些行为。当然,在同一个域内,客户端脚本可以任意读写同源内的资源,前提是这个资源本身是可读可写的。
通俗的讲,浏览器有一个很重要的安全机制,即为同源策略:不用域的客户端脚本在无明确授权的情况下不能读取对方资源,跨域也就是不同源。
回答了浏览器的同源策略,再回答一下跨域。
只要协议,域名,端口有一个不同,就是跨域,
ajax请求一个目标地址为非本域(协议,域名,端口任意一个不同)的web资源,就是跨域。
介绍了浏览器同源 策略和跨域问题,接下来,开始回答正题。为什么会跨域?
ajax请求一个目标地址为非本域(协议,域名,端口任意一个不同)的web资源,就是跨域。
2、谷歌浏览器JSON出现了跨域问题,火狐JSON可以看到数据。这是为什么?
既然跨域失败,就要找原因。这很简单,跨域的三要素,协议,域名,端口。肯定有一个不一样,才导致跨域问题的出现。
读取本地JSON代码,火狐可以正常读取到本地的JSON文件,
原因是:虽然允许跨域很不安全,但是如果不跨域的话又带来很多不便。所以火狐是允许跨域的。
那么谷歌是怎么回事,为什么谷歌获取不到,会出现跨域的问题?
这里要提一点,访问本地计算机中的文件,使用的是file协议
file协议主要用于访问本地计算机中的文件,就如同在Windows资源管理器中打开文件一样,注意它是针对本地(本机)的,简单来说,file协议是访问你本机的文件资源。
这么看来,谷歌报错的原因已经很清楚了,控制台可以明显看到
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
跨源请求仅支持协议方案。 :http, data, chrome, chrome-extension, https.
说白了就是,由于安全原因浏览器不允许跨域访问,安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败,是因为浏览器安全机制不允许,而火狐为了方便允许跨域(虽然这样很不安全)。而且在其他浏览器中,出现跨域问题也是这个原因,就是浏览器安全机制的原因。
3、为什么谷歌不支持跨域?
这个问题,网上搜索出来的全是怎么解决的,没人回答是为什么?或者没有直接回答,但对于我这种小白来讲,绕一点弯的回答,和没回答一样。
这是因为浏览器的安全策略,即禁止ajax访问本地的文件,这是不安全也是不允许的,举例的话,就相当于你访问了一个网站,然后这个网站就可 以读取到你本地的文件,这种行为是不允许的。
4、怎么解决跨域问题?
1、前端人员使用的一般是JSONP进行跨域。
2、项目中使用nginx反向代理。
3、修改谷歌浏览器的配置。
4、在webstrom中打开。
这四种方法,前端人员本地最方便也是最实用的就是第一种,不建议使用第三种方法,你修改了浏览器的配置,难道让用户也修改浏览器的配置吗。
第二种方法,在项目中,会部署 nginx 反向代理,这里不做具体赘述。有需要的可以自行查找。
第四种方法,用在angula的路由中,webstrom中自带了一个本地服务器。会自动为你的文件开一个端口服务。
使用jsonp解决跨域 :(仅适用于GET请求)
实现原理:<script> 标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON文件的调用</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
</body>
<!--引入JS-->
<script type="text/javascript" src="BW-JSON.js"></script>
<!--jsonp中 需要注意的是
<script src="car.json?callback=train"></script>
src ? 之前为文件地址,? 之后为回调函数callback名称,
回调函数可以简写为 cb , 然后 回调函数 名称要与 JSON文件中的名称一致
可以在 对应的文件名中看下,如,car.json?callback=loa,car.json的 函数名为 train-->
<script src="car.json?cb=train"></script>
</html>
jsonp的产生:
1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>
4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.
5.而json又是一个轻量级的数据格式,还被js原生支持
6.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,
demo1:基于script标签实现跨域
举个例子:我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript"> 8 var message = function(data) { 9 alert(data[1].title); 10 }; 11 </script> 12 13 <script type="text/javascript" src="http://web.cn/js/message.js"></script> 14 </head> 15 <body> 16 <div id='testdiv'></div> 17 </body> 18 </html>
远程的message.js文件是
1 message([ 2 {"id":"1", "title":"天津新闻联播,雷人搞笑的男主持人"}, 3 {"id":"2", "title":"楼市告别富得流油 专家:房价下跌是大概率事件"}, 4 {"id":"3", "title":"法国人关注时事 八成年轻人每天阅读新闻"}, 5 {"id":"4", "title":"新闻中的历史,历史中的新闻"}, 6 {"id":"5", "title":"东阳新闻20140222"}, 7 {"id":"6", "title":"23个职能部门要增加新闻发布频次"}, 8 {"id":"7", "title":"《贵州新闻联播》 中国美丽乡村"}, 9 {"id":"8", "title":"朝韩离散家属团聚首轮活动结束"}, 10 {"id":"9", "title":"索契冬奥会一天曝出两例兴奋剂事件"}, 11 {"id":"10", "title":"今天中国多地仍将出现中度霾"} 12 ]);
这个时候我们得到的相应头是:
这样就实现跨域成功了,因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
demo2: 基于script标签实现跨域
让远程js知道它应该调用的本地函数叫什么名字,只要服务端提供的js脚本是动态生成的就好了,这样前台只需要传一个callback参数过去告诉服务端,我需要XXX代码,于是服务端就会得到相应了.
例如 在http://study.cn/json/jsonp/jsonp_3.html页面请求 http://192.168.31.137/train/test/jsonpthree
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript"> 8 var messagetow = function(data){ 9 alert(data); 10 }; 11 var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow"; 12 var script = document.createElement('script'); 13 script.setAttribute('src', url); 14 document.getElementsByTagName('head')[0].appendChild(script); 15 </script> 16 </head> 17 <body> 18 </body> 19 </html>
得到的响应头是:
demo3: 基于jquery跨域
那么如何用jquery来实现我们的跨域呢???jquery已经把跨域封装到ajax上了,而且封装得非常的好,使用起来也特别方便
如果是一般的ajax请求:
1 $.ajax({ 2 url:'http://192.168.31.137/train/test/testjsonp', 3 type : 'get', 4 dataType : 'text', 5 success:function(data){ 6 alert(data); 7 }, 8 error:function(data){ 9 alert(2); 10 } 11 });
那么在浏览器中会报错:
jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="./js/jquery.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 var name = 'chenshishuo'; 10 var sex = 'man'; 11 var address = 'shenzhen'; 12 var looks = 'handsome '; 13 $.ajax({ 14 type : 'get', 15 url:'http://192.168.31.137/train/test/testjsonp', 16 data : { 17 name : name, 18 sex : sex, 19 address : address, 20 looks : looks, 21 }, 22 cache :false, 23 jsonp: "callback", 24 jsonpCallback:"success", 25 dataType : 'jsonp', 26 success:function(data){ 27 alert(data); 28 }, 29 error:function(data){ 30 alert('error'); 31 } 32 }); 33 }); 34 </script> 35 </head> 36 <body> 37 <input id='inputtest' value='546' name='inputtest'> 38 <div id='testdiv'></div> 39 </body> 40 </html>
jsonp 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback 自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
看看请求头和相应头吧
请求头:jquery会自动带入callback参数,当服务端获取到这个参数后,返回回来.(响应头)
现在是不是明白了跨域的基本原理,和基本的使用方法呢??
上面我们说到img中的src可以自动调用远程图片的(这个比较简单我在这里就不说了)
还有ifram请求:
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点,
也就是两个页面必须属于一个基础域(例如都是xxx.com),使用同一协议和同一端口,这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数
要点就是 :通过修改document.domain来跨子域
demo4: 通过iframe来跨子域
http://a.study.cn/a.html 请求 http://b.study.cn/b.html
在a.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 document.domain = 'study.cn'; 8 function test() { 9 alert(document.getElementById('a').contentWindow); 10 } 11 </script> 12 </head> 13 <body> 14 <iframe id='a' src='http://b.study.cn/b.html' οnlοad='test()'> 15 </body> 16 </html>
在b.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript"> 8 document.domain = 'study.cn'; 9 </script> 10 </head> 11 <body> 12 我是b.study.cn的body 13 </body> 14 </html>
运行效果截图:
我们就可以通过js访问到iframe中的各种属性和对象了
如果你想在http://a.study.cn/a.html页面中通过ajax直接请求页面http://b.study.cn/b.html,即使你设置了相同的document.domain也还是不行的.
所以修改document.domain的方法只适用于不同子域的框架(父类与子类)间的交互。
如果想通过使用ajax的方法去与不同子域间的数据交互或者是js调用,只有两种方法,一种是使用jsonp的方法外,还有一种是使用iframe来做一个代理。
原理就是让这个 iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据 的,
然后就是通过我们刚刚讲得修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发 送ajax请求,然后收到的数据我们也可以获得了。
上面的所有知识点,应该可以解决第一开始提出的问题了吧.