ajax实现跨域访问
ajax跨域访问是⼀个⽼⽣畅谈的问题啦,⽹上解决⽅法很多,discuz⽤的p3p协议,有兴趣的朋友可以了解下,⽐较常⽤的是JSONP⽅法,貌似⽬前这种⽅法只⽀持GET⽅式,不如POST⽅式安全。
即使使⽤jquery的jsonp⽅法,type设为POST,也会⾃动变为GET。还有⼀种⽅式:如果跨域使⽤POST⽅式,可以使⽤创建⼀个隐藏的iframe来实现,与ajax上传图⽚原理⼀样,但这样感觉会⽐较⿇烦。
因此,通过设置Access-Control-Allow-Origin来实现跨域访问⽐较简单。
例如:客户端的域名是,⽽请求的域名是www.abc
如果直接使⽤ajax访问,会有以下错误
XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin '' is therefore not allowed access.
解决办法:
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
这样就可以实现ajax POST跨域访问了
代码如下:
<!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="//code.jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="show"></div>
<script type="text/javascript">
$.post("www.abc/server.php",{username:"周伯通",gender:"男"})
.done(function(data){
});
</script>
</body>
</html>
<?php
//制作演⽰,可以⽤mysql_escape_string
$ret = array(
'username' => isset($_POST['username'])? $_POST['username'] : '',
'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);
>
Access-Control-Allow-Origin:* 表⽰允许任何域名跨域访问
如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名
如果需要设置多个域名允许访问,这⾥需要⽤php处理⼀下
例如允许 与 2 可以跨域访问
server.php 修改为
<?php
$ret = array(
'username' => isset($_POST['username'])? $_POST['username'] : '',
'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array(
'',
'2'
);
jquery实现ajaxif(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);
>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。