码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2018-12-22 13:51:57      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:func   ade   跨域   跨域问题   api文档   output   cal   ofo   ref   

做项目遇到一个百度地图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://segmentfault.com/a/1190000010958128

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

标签:func   ade   跨域   跨域问题   api文档   output   cal   ofo   ref   

原文地址:https://www.cnblogs.com/qixidi/p/10160752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!