Js跨域操作

Js跨域操作

解决XMLHttpRequest cannot load xxxx No 'Access-Control-Allow-Origin' header is present on the requested resource

1. PHP响应头方式

2. Jspnp 方式

localhost代码

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "http://test.com/ajax",
            type: "GET",
            dataType: 'jsonp',//重点
            jsonp: 'jsoncallback',//回调
            success: function (result) {
                console.log(result);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        })
    })
</script>

test.com代码

    public function ajax()
    {
        $callback = Request::get('jsoncallback');
        $rst = json_encode(['name' => 'Larry', 'date' => time()]);
        $callback = $callback . "($rst)";
        echo $callback;
    }

仔细观察network中实际请求的地址是

http://test.com/ajax?jsoncallback=jQuery2140047886789588887035_1471249739057&_=1471249739058

而接口响应的结果是

jQuery2140047886789588887035_1471249739057({"name":"Larry","date":1471249739})

分析

  1. JQuery会把接口返回的结果,当成js文件异步加载,执行回调函数
  2. 获取到数据又自动销毁,从而实现了Jsonp跨域操作


Tags

Back to top