XMLHttpRequest 无法加载，请求的资源上不存在“Access-Control-Allow-Origin”标头[重复]

XMLHttpRequest 无法加载。请求的资源上不存在“Access-Control-Allow-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 可以工作，但是当我通过浏览器打开它时，出现相同的错误。

这有点棘手，即使你正确设置了 CORS，它仍然会失败。您应该使用 Google 的内置函数来访问它。如果您尝试通过 $.get() 或类似的方法直接访问它，它将失败...查看这个示例：https://developers.google.com/maps/documentation/javascript/examples/distance-matrix https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

有趣的事实是，当通过 $.get() 访问时（我不确定为什么）：

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

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

我的建议 - 不要尝试通过 get() 获取 json/xml。使用谷歌的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...
    }
}