jsonp如何解决跨域（jsonp解决跨域插件(js、ts)）
导读：介绍： 有时候请求某些第三方api用nginx做反向代理解决跨域不能满足需求，例如请求百度或者腾讯地图的ip定位接口，该接口会根据请求来源的ip返回该ip地址对应的位置信息，但是若是用ng做了代理或者是后端做接口转发的话实际获取到的ip位置信息是服务器的ip地址，想要直接解析客户端的ip位置信息就必须得从客户端直接调用第三方ip定...
介绍： 有时候请求某些第三方api用nginx做反向代理解决跨域不能满足需求 ，例如请求百度或者腾讯地图的ip定位接口 ，该接口会根据请求来源的ip返回该ip地址对应的位置信息 ，但是若是用ng做了代理或者是后端做接口转发的话实际获取到的ip位置信息是服务器的ip地址 ，想要直接解析客户端的ip位置信息就必须得从客户端直接调用第三方ip定位接口 ，但是直接请求第三方接口会出现跨域 ，这时候就可以使用jsonp来解决这个跨域问题 。注意：jsonp只能发送get类型的请求 。
jsonp插件地址：https://gitee.com/ml_plugins/jsonp
JS版本:
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>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！