XMLHttpRequest 无法加载，请求的资源上不存在“Access-Control-Allow-Origin"标头 [英] XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

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"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！