设置Access-Control-Allow-Origin实现ajax跨域访问


关键词

Ajax 跨域

摘要

本文介绍一个ajax跨域访问的方法,是在PHP中设置输出头Access-Control-Allow-Origin:*

直接上代码:


服务器端:


<?php  
$ret = array(  
    'name' => isset($_POST['name'])? $_POST['name'] : '',  
    'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  
);  
 
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
 
echo json_encode($ret);
?>


客户端:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  <title> 跨域测试 </title>  
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
 </head>  
 
 <body>  
    <div id="show"></div>  
    <script type="text/javascript">  
    $.post("http://wdphp/ajax.php",{name:"zaho",gender:"male"})  
      .done(function(data){  
        document.getElementById("show").innerHTML = data.name + ' ' + data.gender;  
      });  
    </script>  
 </body>  
</html> 


客户端可以直接放在本地新建一个html文件即可,服务器端随便找个支持PHP的网站根目录下。注意客户端$.post的链接地址改正确即可实现跨域。


主要是看这几句:

header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');


其中真正跨域的控制为:

header('Access-Control-Allow-Origin:*');

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:设置Access-Control-Allow-Origin实现ajax跨域访问:http://www.splaybow.com/post/ajax-access-control-allow-origin-120.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 百度提供了Bootstrap Glyphicons的CDN HTML5(H5)表单验证 »