vue axios jsonp

因为axios不支持jsonp了,所以我按照网友的方式,安装了jsonp 模块,npm i jsonp –save,
然后在一个组件内引入了import jsonp from ‘jsonp’
我想请求一个其他网站的链接地址 http://rrrrrrk.tech/data.json

代码如下:

 methods:{
          getList: function () {
             jsonp('http://rrrrrrk.tech/data.json', null, (err, data) => {
                debugger
               if (err) {
                 console.error(err.message);
               } else {
                 if (data.list.length > 0) {
                   data.list.map((item) => this.list.push(item))
                   console.log(data);
                 }
               }
             })
            }
        },
        created:function(){
          this.getList()    
        } 

现在的问题是代码没有进debugger,console里面报错了,错误如下:
图片描述
图片描述

然后过半分钟左右,进入断点了,然后报错请求超时
图片描述

我想问下是我的代码有问题还是这个链接有问题呀?为什么不是所有的外部链接都可以请求到呢?哪位大神给提供一个可以实现jsonp效果的地址,

回答:

你可能对jsonp有什么误解
jsonp的返回值必须是一个回调函数 js代码 并不是json数据

你这个json文件配了Access-Control-Allow-Origin: * 可以直接获取

axios.get('http://rrrrrrk.tech/data.json').then(function(res){
    console.log(res)
})

回答:

这里需要了解一下JSONP原理,实际上是将接口返回的内容作为javascript来执行,通常做法是返回数据用指定的callback函数包裹。
如:请求www.example.com/a?callback=”callbackFn”
接口返回: “callbackFn(” + jsondata + “)”

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注