1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 使用 jsonp解决跨域问题 在vue中成功调用心知天气api

使用 jsonp解决跨域问题 在vue中成功调用心知天气api

时间:2024-03-11 05:20:51

相关推荐

使用 jsonp解决跨域问题 在vue中成功调用心知天气api

使用前须知

心知天气api直接使用会出现跨域,查阅心知天气api文档后发现它支持jsonp,故可使用该方法。

jsonp是一种跨域通信的手段,只支持get方法,而且需要后端代码的配合

心知天气获取签名

心知天气规定JSONP 方式调用必须使用签名验证方式,我们首先来获取签名,并生成请求参数

注册账号,获取私钥和公钥按如下方法获取签名,并生成请求参数

1. 构造验证参数字符串

将请求参数按照参数名字典升序排列后,把所有参数 param=value 用&连接起来,类似 URI 中 QueryString 的构造方式。目前支持的参数有:UNIX 时间戳ts单位为秒,转换成字符串长度为 10 位,不要用毫秒值)、签名失效时间ttl(单位为秒,缺省为 1800,可选)和公钥uid。例:ts=1443079775&ttl=300&uid=your_public_key

2. 使用 HMAC-SHA1 方式,以 API 密钥中的“私钥”对上一步生成的参数字符串进行加密

常见程序语言通常会内置加密函数,或通过扩展库提供支持。例如在 NodeJS 中,您可以使用crypto模块中的中的createHmac函数,例:crypto.createHmac("sha1", your_private_key)

3. 将上一步生成的加密结果用 Base64 编码,并做一个 URLEncode,得到签名 sig

步骤(1)中的参数例子用 base64 编码后得到的结果为dTYeoN8WdOfW4PiwgEdLa0gWFzo=,做完 urlencode 最终得到的签名 sig 为dTYeoN8WdOfW4PiwgEdLa0gWFzo%3d

4. 将上一步得到的签名 sig 附在第一步构造的参数字符串后,作为请求的一个参数发送

上述例子里,请求参数即为ts=1443079775&ttl=300&uid=your_public_key&sig=dTYeoN8WdOfW4PiwgEdLa0gWFzo%3d

上面第一步的UNIX时间戳直接百度搜,第一步搞定后直接使用如下代码生成sig

//记得npm i cryptovar crypto = require('crypto');var hmac = crypto.createHmac('sha1', '你的私钥');hmac.update('第一步生成的东西');//生成sigconsole.log('sig='+hmac.digest('base64'));

得到sig后整合一下得到请求参数,例:ts=1443079775&ttl=300&uid=your_public_key&sig=dTYeoN8WdOfW4PiwgEdLa0gWFzo%3d

在vue中使用jsonp

安装vue-jsonp

npm i vue-jsonp -S

在 src/main.js 中

import Vue from 'vue'import {vueJsonp} from 'vue-jsonp'Vue.use(vueJsonp)

使用

this.$jsonp('/v3/weather/daily.json?&location=beijing'+'你得到的请求参数').then((res) => {console.log(res)}).catch((err) => {console.log(err)})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。