草庐IT

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

小小马哥 2023-03-28 原文

介绍: 有时候请求某些第三方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)的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件? - 2

    在选择我想要运行操作的频率时,唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案,但您可以安排它每天运行,并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  3. 屏幕录制为什么没声音?检查这2项,轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题,比如录制的视频没有声音。屏幕录制为什么没声音?今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音,你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音,屏幕录制为什么没声音?如果当时没有打开音频录制,则录制好的视频是没有声音的。因此,建议在录制前进行检查。屏幕上没有声音,很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音,即可录制音频和图画同步视频。操作方法:步骤1:点击电脑屏幕右下侧的“小喇叭”图案,在上方的选项中,选择“声音”。 步骤2:在“声

  4. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

  5. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  6. ruby-on-rails - 您希望看到哪些 Rails 插件? - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为?您过去曾搜索过哪些插件功能但找不到?哪些现有的Rails插件可以改进或扩展,如何改进或扩展? 最佳答案 我希望在管理界面中看到一个引擎插件,它提供了应用程序中所有模型的仪表板摘要,以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questio

  7. ruby - 如何更快地解决 project euler #21? - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  8. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署,我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择,但它有一些错误,这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件?显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  9. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  10. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

随机推荐