JSONP实现Vue跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<!--百du接口-->
<ul id="box">
    <li v-for="item in v1">{{item}}</li>
</ul>

<script>
var vue = new Vue( {
    el: '#box',
    data () {
        return {
            v1:"0"
        }
    },
   mounted:function(){
 //                请求路径
            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    {
                        //请求参数
                        params: {
                            wd:this.v1
                        },
                        jsonp:'cb'
//                        回调参数
                    }).then(function(res){
//                字符串转成json对象
//                console.log(JSON.parse(res.bodyText).s);
//                JSON.parse() 方法将数据转换为 JavaScript 对象。
               vue.v1 = JSON.parse(res.bodyText).s;
            }
              ,function(){
                console.log("抱歉无法调取")
            }
            )
        }
});

/*同源策略下,某个服务器是无法获取到服务器以外的数据,
但是html里面的img,iframe和script等标签是个例外,
这些标签可以通过src属性请求到其他服务器上的数据。
而JSONP就是通过script节点src调用跨域的请求。*/
</script>

</body>
</html>

JSONP实现ajax跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-jsonp 跨域请求</title>
</head>
<body>
<!--百du接口-->
<ul id="box">
    ajax-jsonp 跨域请求
</ul>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';
$.ajax({
    url: url,
    type: 'GET',
    dataType: "jsonp",
    jsonp: "cb",
   // cache: true,    //禁止缓存
  // jsonpCallback: 'wd',
    data: {'wd': '0'},
    success: function(res) {
        var data = JSON.parse(res.bodyText).s
       console.log("跨域请求", data);
    }
});
</script>

</body>
</html>
  • jsonp: callback #发送给请求处理程序的,被请求端通过request.GET.get(“callback”),获得jsonp回调函数的参数
  • jsonpCallback: 'list' #定义回调函数的名称,然后后面通过list(…)来处理获取数据
Logo

前往低代码交流专区

更多推荐