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

時間 2019-11-06

標籤 react fetch api 百度地圖欄目 React 简体版

原文原文鏈接

作項目遇到一個百度地圖api 的跨域問題。因爲使用fetch ，在調用相似git

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

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會爲空。json

仔細查看百度地圖api文檔後，決定從jsonp入手，
因而找到這個庫fetch-jsonpapi

上代碼跨域

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了。app

ps: 喜歡請點贊o(￣▽￣)ブcors

ps: 有更好方法的請賜教~fetch

ps：fetch-jsonp文檔jsonp