资讯专栏INFORMATION COLUMN

React + fetch API + 百度地图api + 跨域 填坑。

AaronYuan / 1940人阅读

摘要:做项目遇到一个百度地图的跨域问题。由于使用,在调用类似您的的时候,不可避免的出现了跨域问题。您的设置是解决了报错问题,但是响应的会为空。仔细查看百度地图文档后,决定从入手,于是找到这个库上代码您的这时候便可以得到正确的了。

做项目遇到一个百度地图api 的跨域问题。由于使用fetch ,在调用类似

http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的时候,不可避免的出现了跨域问题。

fetch(baseUrl + "location=39,116&output=json&ak=您的ak&callback=showLocation",{
    mode:"no-cors",
    // credentials: "include",
    headers:{ Accept: "application/json",}
  })
    .then( response => response.json() )
    // .then(data => console.log(data))
    .catch( e => console.log(e,111))

设置 mode:"no-cors",是解决了报错问题,但是响应的body会为空。

仔细查看百度地图api文档后,决定从jsonp入手,
于是找到这个库fetch-jsonp

上代码

import fetchJsonp from "fetch-jsonp"
fetchJsonp(baseUrl + "location=39,116&output=json&ak=您的ak",{
    // mode:"no-cors",
    // credentials: "include",
    headers:{ Accept: "application/json",},
    jsonCallbackFunction:"showLocation"
  })
    .then( response => response.json() )
    .then(data => console.log(data))

这时候便可以得到正确的response body了。

ps: 喜欢请点赞o( ̄▽ ̄)ブ

ps: 有更好方法的请赐教~

ps:fetch-jsonp文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85125.html

相关文章

  • 第三方库

    摘要:微信支付,支付宝支付,银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库,使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程 强大轻量的动画库 anime.js 入门教程 来自B站的开源的MagicaSakura源...

    seanHai 评论0 收藏0
  • 第三方库

    摘要:微信支付,支付宝支付,银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库,使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程 强大轻量的动画库 anime.js 入门教程 来自B站的开源的MagicaSakura源...

    gityuan 评论0 收藏0
  • React Native填坑之旅--HTTP请求篇

    摘要:填坑之旅篇填坑之旅动画填坑之旅请求篇如果不能从头到尾的建立一个应用,那么将失色不少。随着,内置的支持了这个填补回调地狱大坑的功能。很好的利用了这一点,它的请求返回结果就是。在界面上显示异常用,显示警告使用。 React Native填坑之旅--Button篇React Native填坑之旅--动画React Native填坑之旅--HTTP请求篇 如果不能从头到尾的建立一个RN应用,那...

    yexiaobai 评论0 收藏0
  • vue 百度地图api进行地理解析(解决跨域问题)

    摘要:我采用了插件原生百度地图的二次封装,但是插件里的红点标记需要用到经纬度值。 先扯一会儿 首先非常感谢大家的阅读(感谢已加粗),这是我人生中第一次写技术文章(以前打字都费劲),本人小white一个(秀一下英语词汇量),技术不咋地,就是爱分享,动不动还来个原创,你说气人不~ 闲话少说,进入主题!!! 重点部分 最近在做一个基于vue的设备管理系统,其中有一个需求:需要把设备所在地的...

    Freeman 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<