解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin

今天一个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.yanue.net/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>
  16.     测试Ajax跨域问题
  17. </body>
  18. </html>

没有结果,chrome用F12 下查看错误 得知:XMLHttpRequest cannot load http://map.yanue.net/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.yanue.net/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:*

 
 
  1. header("Access-Control-Allow-Origin: *"); # 跨域处理

问题就解决了。

猜你喜欢

转载自blog.csdn.net/luojishan1/article/details/77770134
今日推荐