XMLHttpRequest cannot load, No ‘Access-Control-Allow-Origin’ header is present on the requested resource [duplicate]

by

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

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/

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

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
  3. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  4. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  5. Upload file with Ajax XMLHttpRequest
  6. What is the cleanest way to get the progress of JQuery ajax request?
  7. jQuery has deprecated synchronous XMLHTTPRequest
  8. A CORS POST request works from plain JavaScript, but why not with jQuery?
  9. What’s the best way to retry an AJAX request on failure using jQuery?
  10. Find out how long an Ajax request took to complete
  11. jQuery.getJSON – Access-Control-Allow-Origin Issue
  12. How to upload a file using jQuery.ajax and FormData
  13. Show a progress bar for downloading files using XHR2/AJAX
  14. Browser waits for ajax call to complete even after abort has been called (jQuery)
  15. How can I use deflated/gzipped content with an XHR onProgress function?
  16. Adding The Anchor Text As The Title Dynamicaly
  17. How to prevent a click on a ‘#’ link from jumping to top of page?
  18. Resize jqGrid when browser is resized?
  19. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  20. how can I override console.log() and prepend a word at the beginning of the output?
  21. Remove all attributes
  22. Clone a file input element in Javascript
  23. How to get the image size (height & width) using JavaScript
  24. submit event does not fire if submit initiated programmatically
  25. jQuery plugin DataTables: How to highlight the current search text?
  26. Jquery getJSON cross domain problems
  27. closure inside a for loop – callback with loop variable as parameter [duplicate]
  28. Why does the jQuery JSON parser need double escaping for backslashes?
  29. Is there any way to check reachability test of server in jQuery
  30. Generate XML document in-memory with JavaScript

Leave a Comment