码迷,mamicode.com
首页 > 编程语言 > 详细

jquery、javascript实现(get、post两种方式)跨域解决方法

时间:2017-04-17 16:16:12      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:允许   响应   query   strong   back   color   div   参数   set   

一、实现get方式跨域请求数据

浏览器端

<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "get",
        dataType: "jsonp", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

服务器端

<?php
	$data = [
		‘info‘ 	 => ‘跨域请求成功‘,
		‘status‘ => 1
	];
	$callback = $_GET[‘callback‘];//callback参数是发起请求是jquery的回调参数。
	echo $callback.‘(‘.json_encode($data).‘)‘;//所有返回数据时,需要按照此方式。
?>

 

二、实现post方式跨域请求

浏览器端

<script>
$(document).ready(function(){
	$.ajax({
	    url: "http://www.xxx.cn/index.php",
	    type: "post",
	    dataType: "json", //指定服务器返回的数据类型
	    success: function (data) {
	        console.log(data);
	    }
	});
});
</script>

 

服务器端

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

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

例如:header(‘Access-Control-Allow-Origin:http://www.xxx.com‘);

<?php
	header(‘Access-Control-Allow-Origin: *‘);//允许所有来源访问
	header(‘Access-Control-Allow-Methods: POST‘);//响应类型
	
	$data = [
		‘info‘ 	 => ‘post方式,跨域请求成功‘,
		‘status‘ => 1
	];
	echo json_encode($data);
?>

 

某些header请求头

// 指定允许其他域名访问
header(‘Access-Control-Allow-Origin:*‘);
// 响应类型
header(‘Access-Control-Allow-Methods:POST‘);
// 响应头设置
header(‘Access-Control-Allow-Headers:x-requested-with,content-type‘);

//设置内容类型为json

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

jquery、javascript实现(get、post两种方式)跨域解决方法

标签:允许   响应   query   strong   back   color   div   参数   set   

原文地址:http://www.cnblogs.com/yxhblogs/p/6723001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!