Ajax实现跨域访问的鲜栽方式

调程序时遇到“已挡跨源请求:同源策略禁止读取位于……的长距离资源”,这是因经过ajax调用其他域的接口会发跨域问题。

图片 1

釜底抽薪办法如下:

方式一致:服务器端(PHP)设置header头,实现跨域访问

示例:

// PHP
<?php
    header('Access-Control-Allow-Origin:*');  

    $name = $_POST['username'];
    $address = $_POST['address'];
    # code...
    echo json_encode(array(
        'status' => 1,
        'msg'    => 'success'
    ));

// JS
$.ajax({
    type: "POST",
    url: "http://127.0.0.1/jsonp.php",
    dataType: "json",
    data: {
        'username':username,
        'address':address
    }
    success: function(res) {
        # code...
});

办法二:JSONP跨域访问

JSONP全称JSON with
Padding,是用以缓解AJAX跨域问题之一律栽方案。在jquery中即发生包,通过ajax请求多带上一个jsonp的参数即可。

示例:

// PHP
<?php
    $name = $_GET['username'];
    $address = $_GET['address'];
    $callback = $_GET['callback'];  // 最好加上判空和默认值,以防拿不到参数

    $result = json_encode(array(    // 模拟返回值
        'status' => 1,
        'msg'    => 'success'
    ));
    echo $callback . "(" . $result . ")";

// JS
$.ajax({
    type: "GET",
    url: "http://127.0.0.1/jsonp.php",
    dataType: "jsonp",
    jsonp: "callback",
    data: {
        'username':username,
        'address':address
    }
    success: function(res) {
        # code...
});
// 也可以写成
$.ajax({
    type: "GET",
    url: "http://127.0.0.1/jsonp.php?username="+username+"&address="+address,
    dataType: "jsonp",
    jsonp: "callback",
    success: function(res) {
        # code...
    });
});

相关文章