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
})
目录
相关文章
|
5月前
|
API 数据安全/隐私保护 UED
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
在掌握了鸿蒙系统的开发基础后,我挑战了蓝牙功能的开发。通过Bluetooth A2DP和Access API,实现了蓝牙音频流传输、设备连接和权限管理。具体步骤包括:理解API作用、配置环境与权限、扫描并连接设备、实现音频流控制及动态切换设备。最终,我构建了一个简单的蓝牙音频播放器,具备设备扫描、连接、音频播放与停止、切换输出设备等功能。这次开发让我对蓝牙技术有了更深的理解,也为未来的复杂项目打下了坚实的基础。
192 58
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
|
2月前
|
API
钉钉宜搭--远程API,在其他人访问时无法生效
简介: 描述了一种远程API配置问题的场景。开发人员在本地可正常通过应用表单获取数据,但同组织的其他同事访问时无法获取数据,尽管已设置全部权限。问题是关于如何解决这种跨用户数据访问异常的情况,确保同事间能正常共享数据。
|
6月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
6月前
|
负载均衡 数据可视化 API
像素流送api ue多人访问需要什么显卡服务器
本文总结了关于像素流送技术的五大常见问题,包括是否支持Unity模型推流、UE多人访问的最大并发数、所需服务器配置、稳定性问题及API支持情况,旨在帮助开发者更好地理解和应用这一技术。
202 1
|
6月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
6月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
6月前
|
API
如何申请微店的API访问权限?
申请微店API访问权限需先注册账号并完成实名认证,随后提交开发申请,学习API接口,实现功能和数据传输,申请授权获取API Key,测试接口,最后正式上线并持续维护优化。
|
6月前
|
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"}。详情见官网文档。
|
安全 API
Confluence 6 匿名访问远程 API
Confluence 管理员可能希望为匿名用户禁用远程访问 API。这样能够避免恶意软件随意在网站进行批量修改。 希望禁用远程访问 API: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Configuration 链接。
1081 0
|
1月前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。