Ajax实现跨域访问的两种方法

调程序时遇到“已拦截跨源请求：同源策略禁止读取位于……的远程资源”，这是因为通过ajax调用其他域的接口会有跨域问题。

解决方法如下：

方法一：服务器端（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...
    });
});