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&& ;传感器=假。请求的资源上不存在Access-Control-Allow-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你应该使用谷歌的内置功能来访问它。如果你试图通过$ .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屋！