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月前
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
24天前
|
编解码 中间件 API
API实现跨平台访问的方式
【10月更文挑战第16天】API实现跨平台访问的方式
40 2
|
1月前
|
Kubernetes 安全 Cloud Native
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
本文介绍了云原生环境下Kubernetes集群的安全问题及攻击方法。首先概述了云环境下的新型攻击路径,如通过虚拟机攻击云管理平台、容器逃逸控制宿主机等。接着详细解释了Kubernetes集群架构,并列举了常见组件的默认端口及其安全隐患。文章通过具体案例演示了API Server 8080和6443端口未授权访问的攻击过程,以及Kubelet 10250端口未授权访问的利用方法,展示了如何通过这些漏洞实现权限提升和横向渗透。
141 0
云上攻防-云原生篇&K8s安全-Kubelet未授权访问、API Server未授权访问
|
2月前
|
API iOS开发 开发者
Snapchat API 访问:Objective-C 实现示例
Snapchat API 访问:Objective-C 实现示例
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
39 4
|
3月前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之海外是否可以访问人物动漫化的api版本
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
50 0
|
6月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
204 10
|
6月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
128 9
|
6月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
74 8
|
6月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
101 7

热门文章

最新文章