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

调程序时遇到“已拦截跨源请求:同源策略禁止读取位于……的远程资源”,这是因为通过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...
    });
});
上一篇:C#中List.Clear()方法和实例化new List()操作的结果分析


下一篇:Kakfa重连测试