【Vue】jsonp 在 Vue 中的使用

本期内容

在前端访问后端数据的时候经常会出现跨域问题，jsonp 便是其中一种解决的方式，前提是接口能够支持 jsonp 的访问。

目录

1、安装

2、添加到 main.js 中

3、按如下语法使用

4、以访问百度鹰眼轨迹 API 为例，发起 Get 请求

---

1、安装

npm install vue-jsonp --save

2、添加到 main.js 中

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

3、按如下语法使用

var jsonParams={
    paramsA : ...
}
this.$jsonp('url',jsonParams).then(res => {
  ...
})

4、以访问百度鹰眼轨迹 API 为例，发起 Get 请求

以下请求仅展示，具体需求请参考 百度鹰眼轨迹API

// 获取轨迹信息
    getTrackInfo () {
      var params = {
        ak: '...',
        service_id: '...',
        entity_name: '...',
        start_time: ...,
        end_time: ...,
        dataType: 'jsonp'
      }
      this.$jsonp('http://yingyan.baidu.com/api/v3/track/gettrack', params).then(res => {
        console.log('res',res)
      }).catch(err => {
        console.log('err', err)
      })
    },