ajax允许跨域访问 :Access-Control-Allow-Origin 代码案例

一说到ajax跨域。首先想到的就是jsonp

 

JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。

即使使用jQuery的jsonp方法,type设为POST,也会自动变为GET。

 

官方问题说明:

  1. “script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter,
  2.  “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.

 

如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。

因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

 

如果直接使用ajax访问,会有以下错误:

  1. XMLHttpRequest cannot load http://www.server.com/server.PHP. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

 

被请求的Response header中加入:

  1. <?php
  2. // 指定允许其他域名访问  
  3. header('Access-Control-Allow-Origin:*');
  4. // 响应类型  
  5. header('Access-Control-Allow-Methods:POST');
  6. // 响应头设置  
  7. header('Access-Control-Allow-Headers:x-requested-with,content-type');
  8. ?>

 

ajax跨域访问代码案例:

例如:客户端域名:www.aaa.com     服务端域名:www.bbb.com

 

test.html 路径:http://www.aaa.com/test.html

  1. <html>
  2.  <head>
  3.   <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.   <title> 跨域测试 </title>
  5.   <script src="//code.jquery.com/jquery.js"></script>
  6.  </head>
  7.  <body>
  8.     <div id="show"></div>
  9.     <script type="text/javascript">
  10.     $.post("http://www.bbb.com/test.php",{name:"111",number:"222"})
  11.       .done(function(data){
  12.         document.getElementById("show").innerHTML = data.name + ' ' + data.number;
  13.       });
  14.     </script>
  15.  </body>
  16. </html>

 

test.php 路径:http://www.bbb.com/test.php

  1. <?php
  2. $dataarray(
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',
  4.     'number' => isset($_POST['number'])? $_POST['number'] : ''
  5. );
  6. header('content-type:application:json;charset=utf8');
  7. header('Access-Control-Allow-Origin:*');
  8. header('Access-Control-Allow-Methods:POST');
  9. header('Access-Control-Allow-Headers:x-requested-with,content-type');
  10. echo json_encode($data);
  11. ?>

ajax跨域

重要提示:

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

 

如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如:

  1. header('Access-Control-Allow-Origin:http://www.aaa.com');

 

如果需要设置多个域名允许访问,这里需要用php处理一下;

例如:

允许 www.aaa1.com 与 www.aaa2.com 可以跨域访问:

  1. <?php
  2. $ret = array(
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',
  4.     'number' => isset($_POST['number'])? $_POST['number'] : ''
  5. );
  6. header('content-type:application:json;charset=utf8');
  7. $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
  8. $allow_origin = array(
  9.     'http://www.aaa1.com',  
  10.     'http://www.aaa2.com'  
  11. );
  12. if(in_array($origin$allow_origin)){
  13.     header('Access-Control-Allow-Origin:'.$origin);
  14.     header('Access-Control-Allow-Methods:POST');
  15.     header('Access-Control-Allow-Headers:x-requested-with,content-type');
  16. }
  17. echo json_encode($ret);
  18. ?>
    A+
发布日期:2017年05月08日  所属分类:Ajax
最后修改时间:2017-05-08 19:42
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
付杰
wordpress discux dedecms 帝国 phpcms等快速建站服务
wordpress discux dedecms 帝国 phpcms等快速建站服务
  • ¥ 99.9元
  • 市场价:499.9元
wordpress站群服务 泛解析二级域名站群 二级目录站群
wordpress站群服务 泛解析二级域名站群 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  3   博主  0

  1. winnertoronto 0

    好棒,支持。
    真心谢谢你的分享

    捷径加拿大留学移民:http://canadaeasy.ca




    0



    0
  2. 未知的旅程 1

    非常棒




    0



    0