vue axios jsonp

Question

因为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效果的地址,

Answer 1

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

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

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

Answer 2

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