jsonp解决跨域插件(js、ts)
介绍：
有时候请求某些第三方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>来自：https://www.cnblogs.com/maxiansheng/archive/2022/07/20/16496750.html
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
