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

2022-07-20 11:04:43 阅读：188 来源： 互联网

标签：插件跨域 script url ts window jsonp query callbackName

介绍： 有时候请求某些第三方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('

标签：插件,跨域,script,url,ts,window,jsonp,query,callbackName
来源： https://www.cnblogs.com/maxiansheng/p/16496750.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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