jsonp解决跨域插件(js、ts)

发布时间：2022-08-10 文章分类：编程知识 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

介绍： 有时候请求某些第三方api用nginx做反向代理解决跨域不能满足需求，例如请求百度或者腾讯地图的ip定位接口，该接口会根据请求来源的ip返回该ip地址对应的位置信息，但是若是用ng做了代理或者是后端做接口转发的话实际获取到的ip位置信息是服务器的ip地址，想要直接解析客户端的ip位置信息就必须得从客户端直接调用第三方ip定位接口，但是直接请求第三方接口会出现跨域，这时候就可以使用jsonp来解决这个跨域问题。注意：jsonp只能发送get类型的请求。

jsonp插件地址：https://gitee.com/ml_plugins/jsonp

JS版本:

/**
 * @description 用于解决GET类型请求跨域的jsonp插件
 * @param  url 请求接口地址
 * @param  query 请求入参
 * @author xiao ma ge
 */
export default function jsonp(url, query = {}) {
  return new Promise((resolve, reject) => {
    // 根据时间戳生 + 随机数成一个callback回调名
    const callbackName = `jsonp_${new Date().getTime()}` + `${Math.random().toString().replace(/\D/g, '')}`
    // 创建一个script
    const script = document.createElement('script')
    // 字符串拼接生成基本url
    let baseUrl = `${url}${url.indexOf('?') === -1 ? '?' : '&'}callback=${callbackName}`
    // 遍历query对象拼接参数到url后
    for (const item in query) {
      const index = baseUrl.indexOf('?')
      baseUrl += `${index === -1 ? '?' : '&'}${item}=${query[item]}`
    }
    // jsonp核心，通过script的跨域特性发出请求
    script.src = baseUrl
    // 给window添加属性，用于获取jsonp结果
    window[callbackName] = (res) => {
      if (res) {
        resolve(res)
      } else {
        reject('未查询到任何数据')
      }
      // 删除window下属性
      delete window[callbackName]
      // 得到结果后删除创建的script
      document.body.removeChild(script)
    }
    // 动态创建script标记，错误的监听
    script.addEventListener('error', () => {
      delete window[callbackName]
      document.body.removeChild(script)
      reject('请求失败！')
    })
    // 把创建的script挂载到DOM
    document.body.appendChild(script)
  })
}

ts版本：

/**
 * @description 用于解决GET类型请求跨域的jsonp插件
 * @param  url 请求接口地址
 * @param  query 请求入参
 * @author xiao ma ge
 */
declare global {
  interface Window {
    [index: string]: any
  }
}
type queryType = {
  [index: string]: any
}
export default function jsonp(url: string, query: queryType = {}): Promise<any> {
  return new Promise((resolve, reject) => {
    // 根据时间戳生 + 随机数成一个callback回调名
    const callbackName = `jsonp_${new Date().getTime()}` + `${Math.random().toString().replace(/\D/g, '')}`
    // 创建一个script
    const script = document.createElement('script')
    // 字符串拼接生成基本url
    let baseUrl = `${url}${url.indexOf('?') === -1 ? '?' : '&'}callback=${callbackName}`
    // 遍历query对象拼接参数到url后
    for (const item in query) {
      const index = baseUrl.indexOf('?')
      baseUrl += `${index === -1 ? '?' : '&'}${item}=${query[item]}`
    }
    // jsonp核心，通过script的跨域特性发出请求
    script.src = baseUrl
    // 给window添加属性，用于获取jsonp结果
    window[callbackName] = (res: any) => {
      if (res) {
        resolve(res)
      } else {
        reject('未查询到任何数据')
      }
      // 删除window下属性
      delete window[callbackName]
      // 得到结果后删除创建的script
      document.body.removeChild(script)
    }
    // 动态创建script标记，错误的监听
    script.addEventListener('error', () => {
      delete window[callbackName]
      document.body.removeChild(script)
      reject('请求失败！')
    })
    // 把创建的script挂载到DOM
    document.body.appendChild(script)
  })
}

vue3中使用示例：

<template>
  <div></div>
</template>
<script lang="ts">
  import jsonp from './utils_ts/jsonp'
  export default {
    name: 'Home',
    setup() {
      /**
       * @description 测试jsonp请求腾讯地图IP定位接口
       */
      jsonp('https://apis.map.qq.com/ws/location/v1/ip', {
        key: '这里填写你的腾讯地图key',
        output: 'jsonp'
      }).then((res) => {
        console.log('? ~ file: index.vue ~ line 14 ~ setup ~ res', res)
      })
      return {}
    }
  }
</script>
<style lang="less" scoped></style>

jsonp解决跨域插件(js、ts)

标签 , , ,