介绍:
有时候请求某些第三方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>
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
什么是JSONP?先说说JSONP是怎么产生的?不管jQuery也好,ExtJs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能
jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发送请求,返回的一般时一段js代码,即函数的调用代码。
一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题;jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变!
JSONP与JSON只有一字之差,我们在使用Jquery的Ajax调用的时候也是使用相同的方法来调用,两者的区别几乎只在于使用的dataType这个属性的不同。但是实际上JSON和JSONP是完全不同的两个东西,JSON是一个数据格式
最近在看《你所不知道的javascript》[中卷]一书,第一部分是类型和语法。本文是基于这部分的产物。在强制类型转换->抽象值操作-> toString 部分,其中对工具函数 JSON.stringify(..) 将 JSON 对象序列化为字符串部分介绍进行了详细的介绍。
因为不想让再引用新的第三方组件了,所以执念了一下,于是搜索到了下面的代码,调试了一下,发现确实能用,但是存在一个缺陷,就是如果存在连续多次的请求,都会回调到同一个函数上
Jsonp(JSON with Padding) 是 json 的一种\\\"使用模式\\\",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!