jquery jsonp 解决ajax无法跨域请求的问题

Devops海洋的渔夫

发布于 2019-05-30 21:48:00

4.6K2

发布于 2019-05-30 21:48:00

文章被收录于专栏：Devops专栏

说到ajax请求为了安全的问题，具有一个同源策略的情况。

说明使用ajax无法进行跨域请求。那么当真的需要进行跨域请求的时候，该怎么办呢？

此时就要使用jquery中的jsonp进行跨域请求了。

jsonp

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

$.ajax({
    url:'js/data.js',
    type:'get',
    dataType:'jsonp',
    jsonpCallback:'fnBack'
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

// data.js里面的数据： fnBack({"name":"tom","age":18});

看完上面的说明，先来写一个简单的示例。

首先编写data.js，放置到nginx服务中。

[root@server01 web]# cat data.js
fnBack({"name":"tom","age":18});
[root@server01 web]#

使用浏览器测试访问如下：

好了，下面编写jsonp来测试一下。

jsonp

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url:'http://192.168.43.128:8008/data.js',
            type:'get',
            dataType:'jsonp',
            jsonpCallback:'fnBack'
        })
        .done(function(data){
            alert(data.name);
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        });
    </script>
</head>
<body>
    <h1>test page</h1>
</body>
</html>

直接使用文件在浏览器打开，跨域请求，如下：

要注意：jsonp是不支持post请求的。就算写post请求也是自动转为get请求。

在上面的示例中没有写到jsonp设置get请求参数的部分，具有参数的示例写法如下：

            $("#search").keyup(function(){
                $.ajax({
                    url:'ttps://sug.so.360.cn/suggest?',
                    type:'get',
                    dataType:'jsonp',
                    data:{word:$(this).val()}
                })
                .done(function(data){
                    console.log(data)
                })
            })

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.05.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json