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

Posted 2021-01-29 栖息地

做项目遇到一个百度地图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