web-dev-qa-db-ja.com

XMLHttpRequestをロードできません。リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

XMLHttpRequestをロードできません http://maps.googleapis.com/maps/api/distancematrix/xml?origins=Affenhausen&destinations=Achenkirch&mode=driving&language=de-DE&sensor=false 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin 'null'はアクセスを許可されません。

JavaScriptコードは

function distanceCalc(){
    start_location = $('select.start option:selected').val();
    target_location = $('select.end option:selected').val();
    $.get('http://maps.googleapis.com/maps/api/distancematrix/xml?origins='+start_location+'&destinations='+target_location+'&mode=driving&language=de-DE&sensor=false', function(data) {

DreamWeaverは動作しますが、ブラウザで開くと同じエラーが発生します。

javascriptjqueryxmlhttprequest
10
suatCoskun

これは少し注意が必要です。CORSを適切に設定しても失敗します。 Googleの組み込み関数を使用してアクセスする必要があります。 $ .get（）または同様の方法で直接アクセスしようとすると失敗します...この例を確認してください： https://developers.google.com/maps/documentation/javascript/examples/distance-マトリックス

興味深い事実は、$。get（）を介してアクセスする場合です（理由はわかりません）。

-THIS WORKS: http://maps.googleapis.com/maps/api/geocode/

-THIS FAILS: http://maps.googleapis.com/maps/api/distancematrix/

私のアドバイス-get（）でjson/xmlを取得しようとしないでください。 googleのAPIビルドイン関数を使用してリクエストを送信し、レスポンスを適切に解析します

次のサンプルコードで開始できます。

// var origins      = [];
// var destinations = [];

var distanceMatrix  = new google.maps.DistanceMatrixService();
var distanceRequest = { origins: origins, destinations: destinations, travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false };
distanceMatrix.getDistanceMatrix(distanceRequest, function(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
    }
    else {
        var origins      = response.originAddresses;
        var destinations = response.destinationAddresses;
        // rest of your code here...
    }
}
10
lokers

応答に「Access-Control-Allow-Origin」ヘッダーがないため、クロスドメインの問題があるように聞こえます。そうでない場合、ブラウザは通常、リクエストをトリガーしているjavascriptとは別のドメインにあるサービスのリクエストを許可しません。

あなたが使用しているAPIはこのアプローチを意図していないようです、おそらくこれは役立つかもしれません： クロスドメインを作る方法AJAX Google Maps APIの呼び出し？

9
homtg