今天一个Ajax跨域问题,纠结我半天,记录之。 

 
 
  1. <html>  
  2. <head>  
  3.     <title>title</title>  
  4.     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  5.     <script>  
  6.         $.ajax({  
  7.             url:"http://map.qq.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",  
  8.             type:'GET',  
  9.             success: function(data){  
  10.                 $('body').append( "Name: " + data );  
  11.             }  
  12.         });  
  13.     </script>  
  14. </head>  
  15. <body>     测试Ajax跨域问题 
  16. </body> 
  17. </html> 
 
没有结果,chrome用F12 下查看错误 得知:XMLHttpRequest cannot load http://map.qq.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228. Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX跨域问题产生。
 
搜了好久,得知解决方案:
 
一:使用jsonp格式, 如jquery中ajax请求参数   dataType:'JSONP'。
 
  1. <html> 
  2. <head> 
  3.     <title>title</title> 
  4.     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  5.     <script> 
  6.         $.ajax({ 
  7.             url:"http://map.qq.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228", 
  8.             type:'GET', 
  9.             dataType:'JSONP', 
  10.             success: function(data){ 
  11.                 $('body').append( "Name: " + data ); 
  12.             } 
  13.         }); 
  14.     </script> 
  15. </head> 
  16. <body> 
  17. 测试Ajax跨域问题 
  18. </body> 
  19. </html> 
二,server端加上header设为 Access-Control-Allow-Origin:*
 
header("Access-Control-Allow-Origin: *"); # 跨域处理
问题就解决了。