AjaxAjax达成跨域访问的三种格局

调程序时蒙受“已拦截跨源请求:同源策略禁止读取位于……的远程资源”,那是因为通过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...
});

主意2: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...
    });
});

相关文章