做項目遇到一個百度地圖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

轉載于:https://www.cnblogs.com/qixidi/p/10160752.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的React + fetch API + 百度地图api + 跨域 填坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。