做項(xiàng)目遇到一個(gè)百度地圖api 的跨域問(wèn)題。由于使用fetch ，在調(diào)用類(lèi)似

http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的時(shí)候，不可避免的出現(xiàn)了跨域問(wèn)題。

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))

設(shè)置 mode:'no-cors',是解決了報(bào)錯(cuò)問(wèn)題，但是響應(yīng)的body會(huì)為空。

仔細(xì)查看百度地圖api文檔后，決定從jsonp入手，
于是找到這個(gè)庫(kù)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))

這時(shí)候便可以得到正確的response body了。

ps: 喜歡請(qǐng)點(diǎn)贊o(￣▽￣)ブ

ps: 有更好方法的請(qǐng)賜教~

ps：fetch-jsonp文檔

來(lái)源：https://segmentfault.com/a/1190000010958128

轉(zhuǎn)載于:https://www.cnblogs.com/qixidi/p/10160752.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。