调用百度地图服务API的跨域问题 Vue+jsonp_前端解决百度地图转化坐标api的跨域问题-优快云博客

本文介绍了在Vue项目中调用百度地图API时遇到的跨域问题及其解决方案。包括尝试使用vue-jsonp库和手动实现JSONP，以及将回调函数挂载到window上以解决跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

今天做一个小页面，这个页面基于百度地图，功能是你输入起始点位置，然后给你规划一条路径并且在地图上可视化出来，当然完成这项工作都是站在百度的肩膀上，在你输入起始点后，需要通过百度地图接口——地理编码服务，正编码接口可以负责把地址名转成经纬度，然后再调用另一个接口得到规划的路径在地图上显示出来。

童鞋们在调用这个接口的时候一定要尽量把地址给写详细了，不然就会出现诸如黄鹤楼迁址北京，清华大学迁址四川这般的乾坤大挪移，还是乖乖输入“武汉黄鹤楼公园”和“北京清华大学”吧（真是产品经理看了沉默，程序员看了流泪系列）

问题

直接调用百度地图的接口会产生跨域问题，也就是说它的这个接口没有设置Access-Control-Allow-Origin（你或许可以在自己的后端封装一个接口然后设置ACAO头），从官方文档上看，他们提供的前端跨域方式为jsonp方案。
如果是直接在前端写jsonp代码（jQuery中的$.ajax也可以方便地设置jsonp模式），那我们的确就可以拿到我们想要的数据，但是问题是在Vue中这样做貌似行不通。

踩坑

同文件下原生jsonp写法肯定是行的，这里就不说了，主要是把方法封装在了另一个js文件里

最开始在我封装的方法中我是这样写的：

export function baidu_api_point(place_wanted, callback) {
   
   
  axios({
   
   
     method: "get",
     url: `http://api.map.baidu.com/geocoding/v3/?address=${
     
     place_wanted}&output=json&ak=我的AK`
  })
  .then(callback)
  .catch