自己写的jsonp跨域文件

jsonp跨域实现代码

• 在项目中全局安装jsonp插件，使用npm install -g jsonp
• 在service文件夹下建立http.js文件，文件在下面
• 在main.js文件里全局引用service ，图片如下
• 在需要使用跨域的组件了里使用jsonp进行跨域， 使用代码方式如下

http.js文件：

import Jsonp from 'jsonp'
import Qs from 'qs'

class Http {
  jsonp (url, data = {}, config = {}) {
    return new Promise((resolve, reject) => {
      const _urlObj = this._parseUrl(url)
      const _data = Object.assign({}, _urlObj.query, data)

      let _url = `${_urlObj.url}${Qs.stringify(_data, {addQueryPrefix: true})}`
      let _config = Object.assign({
        param: 'callback',
        timeout: 3000
      }, config)

      Jsonp(_url, _config, function (err, res) {
        if (err) {
          reject(err)
        } else {
          resolve(res)
        }
      })
    })
  }

  _parseUrl (url = '') {
    const _query = (url.match(/(\?.*$)/) || [''])[0]
    const _url = url.replace(_query, '')
    let _data = {}
    if (_query) {
      _data = Qs.parse(_query, {ignoreQueryPrefix: true})
    }
    return {
      url: _url,
      query: _data
    }
  }
}

export default new Http()

main.js文件里全局引用service

使用jsonp进行跨域

const url = 'https://api.service.100tal.com/sso/qrcode/status'
  this.$http.jsonp(url, {
                uuid: this.uuid || ''
            })
            .then(res => {
                if (res) {
                    this.getDingdingLogin(res)
                } else {
                    console.log('jsonp请求失败')
                }
            })
            .catch(err => {
                window.clearInterval(this.qrcodeTimer) // 清除计时器
            })