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
})
目录
相关文章
|
1月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
425 1
|
11月前
|
API 数据安全/隐私保护 UED
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
在掌握了鸿蒙系统的开发基础后,我挑战了蓝牙功能的开发。通过Bluetooth A2DP和Access API,实现了蓝牙音频流传输、设备连接和权限管理。具体步骤包括:理解API作用、配置环境与权限、扫描并连接设备、实现音频流控制及动态切换设备。最终,我构建了一个简单的蓝牙音频播放器,具备设备扫描、连接、音频播放与停止、切换输出设备等功能。这次开发让我对蓝牙技术有了更深的理解,也为未来的复杂项目打下了坚实的基础。
453 58
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
|
8月前
|
API
钉钉宜搭--远程API,在其他人访问时无法生效
简介: 描述了一种远程API配置问题的场景。开发人员在本地可正常通过应用表单获取数据,但同组织的其他同事访问时无法获取数据,尽管已设置全部权限。问题是关于如何解决这种跨用户数据访问异常的情况,确保同事间能正常共享数据。
|
12月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
1318 4
|
12月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
1399 4
|
12月前
|
负载均衡 数据可视化 API
像素流送api ue多人访问需要什么显卡服务器
本文总结了关于像素流送技术的五大常见问题,包括是否支持Unity模型推流、UE多人访问的最大并发数、所需服务器配置、稳定性问题及API支持情况,旨在帮助开发者更好地理解和应用这一技术。
427 1
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
1629 4
|
12月前
|
API
如何申请微店的API访问权限?
申请微店API访问权限需先注册账号并完成实名认证,随后提交开发申请,学习API接口,实现功能和数据传输,申请授权获取API Key,测试接口,最后正式上线并持续维护优化。
|
1月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
1月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南