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

前端之家收集整理的这篇文章主要介绍了React + fetch API + 百度地图api + 跨域 填坑。前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

做项目遇到一个百度地图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',},jsonCallbackFunction:'showLocation'
  })
    .then( response => response.json() )
    .then(data => console.log(data))

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

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

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

ps:fetch-jsonp文档

原文链接:https://www.f2er.com/react/302984.html

猜你在找的React相关文章