鍍金池/ 問答/HTML/ vue axios jsonp

vue axios jsonp

因?yàn)閍xios不支持jsonp了,所以我按照網(wǎng)友的方式,安裝了jsonp 模塊,npm i jsonp --save,
然后在一個(gè)組件內(nèi)引入了import jsonp from 'jsonp'
我想請(qǐng)求一個(gè)其他網(wǎng)站的鏈接地址 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()    
        } 

現(xiàn)在的問題是代碼沒有進(jìn)debugger,console里面報(bào)錯(cuò)了,錯(cuò)誤如下:
圖片描述
圖片描述

然后過半分鐘左右,進(jìn)入斷點(diǎn)了,然后報(bào)錯(cuò)請(qǐng)求超時(shí)
圖片描述

我想問下是我的代碼有問題還是這個(gè)鏈接有問題呀?為什么不是所有的外部鏈接都可以請(qǐng)求到呢?哪位大神給提供一個(gè)可以實(shí)現(xiàn)jsonp效果的地址,

回答
編輯回答
刮刮樂

你可能對(duì)jsonp有什么誤解
jsonp的返回值必須是一個(gè)回調(diào)函數(shù) js代碼 并不是json數(shù)據(jù)

你這個(gè)json文件配了Access-Control-Allow-Origin: * 可以直接獲取

axios.get('http://rrrrrrk.tech/data.json').then(function(res){
    console.log(res)
})
2017年2月11日 08:46
編輯回答
萌小萌

這里需要了解一下JSONP原理,實(shí)際上是將接口返回的內(nèi)容作為javascript來執(zhí)行,通常做法是返回?cái)?shù)據(jù)用指定的callback函數(shù)包裹。
如:請(qǐng)求www.example.com/a?callback="callbackFn"
接口返回: "callbackFn(" + jsondata + ")"

2017年5月17日 00:07