2016-10-18 62 views
0

我正在嘗試構建一個在服務器端使用Node和Express的React應用程序。我得到跨來源請求阻止錯誤,當我在寫一個AJAX調用谷歌API.Following是我的Ajax請求:React組件無法向Google API發出請求

$.ajax({ 
    url: 
'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins='+start+'&destinations='+end+'&key=%20'+Key, 
    dataType: 'json', 
    cache: false, 
    crossDomain: true, 
    success: function(data) { 
     console.log(json); 
    }.bind(this),  
    error: function(xhr, status, err) {  
     console.error('https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins='+start+'&destinations='+end+'&key=%20'+Key, status, err.toString()); 
    }.bind(this) 
    }); 

鏈接時,通常被稱爲上的Web瀏覽器正確顯示JSON。

我在我的快遞服務器中啓用了https。但這並沒有幫助。 我試着改變數據類型:'jsonp',但它給出parseerror(jquery未被調用)。 jsonp需要一個回調,但我的控件不會回到回調函數,它會繼續給出解析錯誤。

<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script> 
<script> 
    function start() { 
     gapi.load('auth2', function() { 
     auth2 = gapi.auth2.init({ 
     client_id: 'CLIENT_ID.apps.googleusercontent.com', 

      }); 
     }); 
    } 
</script> 

我得到在所有情況下以下錯誤:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=ORIGIN&destinations=END&key=YOUR_KEY . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

但錯誤

我已經在谷歌API console.And取得所需的憑據使用以下腳本嘗試依然存在。有人可以幫我刪除這個錯誤或解析錯誤(在jsonp數據類型的情況下)。

+0

有你爲什麼做一個AJAX調用任何具體原因是什麼? google距離矩陣API有JavaScript實現。 – Coder

+0

我只是想使用Google距離矩陣API中的json。我知道有一個服務。 – shinite

+0

你現在能夠得到它嗎?這裏是示例JavaScript實現的鏈接[谷歌距離矩陣](https://developers.google.com/maps/documentation/javascript/distancematrix) – Coder

回答

0

您無法將網絡從一個域調用到另一個域。由於某些安全原因,瀏覽器會阻止此操作。

閱讀有關CORS

你需要安裝一個服務器去跟谷歌API和您的客戶端(瀏覽器) 應該跟你的服務器,以獲得谷歌的API數據。您的服務器將成爲訪問谷歌apis的代理。

0

您嘗試訪問的API僅支持此功能,即使使用黑客也無法可靠運行。而應使用Google Maps JavaScript API及其Distance Matrix Service。它將爲您處理這個問題,您不必擔心正確獲取服務器請求。

檢出this example谷歌。

這裏是綜合運用的反應,並距離矩陣服務的例子:

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     origin: '', 
 
     destination: '', 
 
     distance: '', 
 
    }; 
 
    } 
 

 
    componentDidMount() { 
 
    // Some sample data plus a helper for the DistanceMatrixService. 
 
    const origin = new google.maps.LatLng(52.516242, 13.377720); 
 
    const destination = 'Potsdam, Germany'; 
 
    const matrix = new google.maps.DistanceMatrixService(); 
 
    
 
    // Get distance from Google API, if server responds, call renderDetails(). 
 
    matrix.getDistanceMatrix({ 
 
     origins: [origin], 
 
     destinations: [destination], 
 
     travelMode: google.maps.TravelMode.DRIVING, 
 
     }, 
 
     this.renderDetails.bind(this) 
 
    ); 
 
    } 
 
    
 
    renderDetails(res, status) { 
 
    // If the request was successfull, fill our state with the distance data. 
 
    if (status == 'OK') { 
 
     this.setState({ 
 
     origin: res.originAddresses[0], 
 
     destination: res.destinationAddresses[0], 
 
     distance: res.rows[0].elements[0].distance.text, 
 
     }); 
 
    } else { 
 
     console.log(status); 
 
    } 
 
    } 
 

 
    render() { 
 
    return(
 
     <div> 
 
     <p>Origin: {this.state.origin}</p> 
 
     <p>Destination: {this.state.destination}</p> 
 
     <p>Distance: {this.state.distance}</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> 
 

 
<div id="View"></div>

+0

因此,使用距離矩陣服務我不必做一個ajax調用,服務會自動提供所需的json? – shinite

+0

正確,它會爲您提供您請求的數據。 –

+0

嘿,我必須在反應組件中編寫腳本,所以我使用下面的代碼'componentWillMount(){0} {0} {0}} const script = document.createElement(「script」); script.src =「https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap」; script.async = true; document.body.appendChild(script); },' – shinite