关于AJAX的跨域问题

前端开发 2712 Views 0 Comments

工作中总会遇到关于AJAX的跨域问题,举例:本来是想要用一下聚合数据平台提供的天气预报的接口的,然后做一个当地的天气情况展示。但是在使用AJAX的时候,被告知出现错误了,下面总结下跨域问题解决办法。

浏览器报错,如下图:

855218-20160218193318941-312328115

这是由于浏览器的同源策略引起的,那么什么是同源策略呢,同源策略就是在不同域下请求另一个页面中的数据时,这是不被允许的。也就是会出现上面的问题。

那么什么是不同域呢。一个域名地址的组成有以下几个部分:协议、子域名、主域名、端口号、请求资源地址。

例如:http://www.abc.com:8080/server.php/这个域名地址。

这里的http://就是协议。

www就是子域名

abc.com就是主域名

8080就是端口号

server.php就是请求资源地址

只要以上的协议、子域名、主域名、端口号有一个不同,就算做不同域。不同域之间的互相请求资源就是跨域请求。那么怎么来解决这个跨域问题呢?,这里我收集了三个方法,分别是利用代理、jsonp、xhr2。

1、使用代理:因为我这里使用的后台语言是php,所以我这里就只是找到了php相关的代码。

  1. <?php  
  2.     header('Content-type:application/json;charset=utf-8');  
  3.     function GetCurl($url){  
  4.         $curl = curl_init();  
  5.         curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);  
  6.         curl_setopt($curl,CURLOPT_URL, $url);  
  7.         curl_setopt($curl,CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);  
  8.         $resp = curl_exec($curl);  
  9.         curl_close($curl);  
  10.         return $resp;  
  11.     }  
  12.     $resp = GetCurl("http://op.juhe.cn/onebox/weather/query?cityname=成都&key=ecf1aeb200fe2eb300a68a4e5a1a0d46");  
  13.     $resp = json_decode($resp,true);  
  14.     echo json_encode($resp);  
  15. ?>  

2、使用jsonp,说道jsonp就不得不说下json了,他是一种轻量级的数据交换格式,它采用了完全独立于语言的文本格式,也就是说不论是任何语言都可以解析json数据,只要按照json的规则来就行。那么json的大概的结构如下:

  1. {  
  2.     "user": [{  
  3.         "name""张三",  
  4.         "age": 20,  
  5.         "sex""male"  
  6.     }, {  
  7.         "name""李四",  
  8.         "age": 25,  
  9.         "sex""male"  
  10.     }, {  
  11.         "name""翠花",  
  12.         "age": 18,  
  13.         "sex""female"  
  14.     }]  
  15. }  

那么什么是jsonp呢,jsonp是一种json的使用模式,他就是为了解决各大主流浏览器之间的跨域问题而出现的,使用jsonp所抓取的并不是json,而是任意的JavaScript代码,然后利用JavaScript直译器执行而不是利用json解析器解析。

  1. $.ajax({  
  2.             type:'GET',  
  3.             url:"http://op.juhe.cn/onebox/weather/query?cityname=成都&key=ecf1aeb200fe2eb300a68a4e5a1a0d46",  
  4.             dataType:'jsonp',  
  5.             jsonp:'callback',  
  6.             success:function(data){  
  7.                 console.log(data);  
  8.             }  
  9.         });  

3、使用xhr2,这里的xhr2是HTML5提出的新功能,XMLHttPRequest Level2已经实现了各大浏览器之间的跨域问题、但是在IE10以下的版本都不被支持。使用这个方法解决跨域问题很简单,只需要在服务器页面添加两行代码就OK。

后台php代码:

  1. <?php  
  2. header('Content-type:application/json;charset=utf-8');  
  3. header('Access-Control-Allow-Origin:*');//这里的*表示所有的域都可以访问。这下面两句就是需要在服务器页面添加的代码。  
  4. header('Access-Control-Allow-Methods:POST,GET');  
  5. $arr=array(  
  6.     array('name'=>'张三','age'=>24,'sex'=>'male'),  
  7.     array('name'=>'李四','age'=>22,'sex'=>'male'),  
  8.     array('name'=>'翠花','age'=>20,'sex'=>'female')  
  9. );  
  10. echo json_encode($arr);  
  11. ?>  

前端代码:

  1. $.get('http://127.0.0.1/AJAX/xhr2.php',function(data){  
  2.     console.log(data);  
  3. });  

浏览器控制台输出结果:855218-20160218201436581-1591186303

好了以上就是我找到的解决ajax跨域问题的方法,今天就先写到这里。

转载请注明:一只羊博客 » 关于AJAX的跨域问题

分享到:
(4)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址