vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)

简介: vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)

vue-jsonp的官网    https://www.npmjs.com/package/vue-jsonp

vue-jsonp的跨域请求原理

ajax请求受同源策略影响,不允许进行跨域请求( 当服务器网络受限时,通过配置 ajax 代理实现的跨域方案,在本地运行时ok,但在项目打包部署后会失效!)

script标签src属性中的链接却可以访问跨域的js脚本

vue-jsonp 插件对script标签src属性访问跨域js脚本的方式进行了封装,可以便捷实现跨域请求

1. 安装 vue-jsonp

npm i vue-jsonp -S

2. 在 main.js中导入 vue-jsonp

import { VueJsonp } from 'vue-jsonp'
 
Vue.use(VueJsonp)
 
const vm = new Vue()
vm.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
})

3. 在 .vue 文件中使用

以访问百度地图的本地检索API为例

this.$jsonp(
    '//api.map.baidu.com/place/v2/search',
    {
        query: '百度大厦',
        region:'北京',
        output: 'json',
        city_limit: true,
        ak: 你的百度ak
    }
).then(res=> {
    let resultList = res.results
})
目录
相关文章
|
19天前
|
负载均衡 数据可视化 API
像素流送api ue多人访问需要什么显卡服务器
本文总结了关于像素流送技术的五大常见问题,包括是否支持Unity模型推流、UE多人访问的最大并发数、所需服务器配置、稳定性问题及API支持情况,旨在帮助开发者更好地理解和应用这一技术。
47 1
|
22天前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
22天前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
25天前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
20天前
|
API
如何申请微店的API访问权限?
申请微店API访问权限需先注册账号并完成实名认证,随后提交开发申请,学习API接口,实现功能和数据传输,申请授权获取API Key,测试接口,最后正式上线并持续维护优化。
|
29天前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{"code":200,"ip":"175.154.88.178","browser":"Chrome","os":"Windows 10"}。详情见官网文档。
|
2月前
|
编解码 中间件 API
API实现跨平台访问的方式
【10月更文挑战第16天】API实现跨平台访问的方式
52 2
|
2月前
|
Kubernetes 安全 Cloud Native
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
本文介绍了云原生环境下Kubernetes集群的安全问题及攻击方法。首先概述了云环境下的新型攻击路径,如通过虚拟机攻击云管理平台、容器逃逸控制宿主机等。接着详细解释了Kubernetes集群架构,并列举了常见组件的默认端口及其安全隐患。文章通过具体案例演示了API Server 8080和6443端口未授权访问的攻击过程,以及Kubelet 10250端口未授权访问的利用方法,展示了如何通过这些漏洞实现权限提升和横向渗透。
234 0
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
|
Web App开发 JavaScript 测试技术
【百度地图API】多家地图API内存消耗对比测验(带源码)
原文:【百度地图API】多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了。酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫做“双林寺”。
964 0
|
5天前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
36 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动