問題描述

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' 不允許訪問.

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/distancematrix/xml?origins=Affenhausen&destinations=Achenkirch&mode=driving&language=de-DE&sensor=false. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Javascript 代碼如下

The Javascript code is as

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 可以工作，但是當我通過瀏覽器打開它時，我得到了同樣的錯誤.

DreamWeaver works, but when I open it via a browser, I get the same error.

推薦答案

這有點棘手，即使你正確設置了 CORS，它仍然會失敗.您應該使用 Google 的內置函數來訪問它.如果您嘗試通過 $.get() 或類似方法直接訪問它，它將失敗...查看此示例:https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

This is a bit tricky, even if you have CORS set up properly it still fails. You should use Google's build in functions to access it. If you try to access it directly via $.get() or similar it will fail... check this example out: https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

有趣的事實，當通過 $.get() 訪問時(我不知道為什么):

Interesting fact, when accessing via $.get() (I am not sure why though):

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

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

我的建議 - 不要嘗試通過 get() 獲取 json/xml.使用 google 的 API 內置函數發送請求，然后正確解析響應

My advice - don't try fetching json/xml via get(). Use google's API build in functions to send request and then parse the response properly

此示例代碼應該可以幫助您入門:

This example code should get you started:

// 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...
    }
}

這篇關于XMLHttpRequest 無法加載，請求的資源上不存在“Access-Control-Allow-Origin"標頭的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！