jquery、javascript實現(get、post兩種方式)跨域解決方法

一、實現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');