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

NO IMAGE


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>
複製程式碼

伺服器端

1
2
3
4
5
6
7
8
<?php
    $data = [
        'info'   => '跨域請求成功',
        'status' => 1
    ];
    $callback $_GET['callback'];//callback引數是發起請求是jquery的回撥引數。
    echo $callback.'('.json_encode($data).')';//所有返回資料時,需要按照此方式。
?>

 

二、實現post方式跨域請求

瀏覽器端

1
2
3
4
5
6
7
8
9
10
11
12
<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’);

1
2
3
4
5
6
7
8
9
10
<?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’);