魔工坊

曹哥

Web工程师


发布者资料

  • 性别: 帅哥
  •  地区: 海南 - 五指山市
  • 认证:  
  • 日期: 2015-07-28 12:15:53

教程标签云


教程分类


推荐教程


同类教程

1701

JQuery完美解决PHP跨域请求问题


ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。

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

官方问题说明:

“script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, “_=[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来实现跨域访问比较简单。

例如:客户端的域名是www.client.com,而请求的域名是www.server.com

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

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.cn is therefore not allowed access.

前端代码如下:

 <head>
  <meta charset="utf-8">
  <title> 跨域测试 </title>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 </head>
 <body>
    <div id="show"></div>
    <script type="text/javascript">
    $.post("http://www.mooban.cn/server.php",{name:"mooban",gender:"male"})
      .done(function(data){
        document.getElementById("show").innerHTML = data.name +   + data.gender;
      });
    </script>
 </body>

服务器端代码如下:

<?php
$ret = array(
    name => isset($_POST[name])? $_POST[name] : ,
    gender => isset($_POST[gender])? $_POST[gender] : 
);

header(content-type:application:json;charset=utf8);

$origin = isset($_SERVER[HTTP_ORIGIN])? $_SERVER[HTTP_ORIGIN] : 

$allow_origin = array(
    http://bbs.mooban.cn,
    http://school.mooban.cn
);

if(in_array($origin, $allow_origin)){
    header(Access-Control-Allow-Origin:.$origin);
    header(Access-Control-Allow-Methods:POST);
    header(Access-Control-Allow-Headers:x-requested-with,content-type);
}

echo json_encode($ret);
?>

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

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

例如:header(Access-Control-Allow-Origin:http://school.mooban.cn);

演示代码打包下载

http://www.mooban.cn/material/show-htm-itemid-85.html#downurl

喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示