3

I'm driving crazy with all this same-origin-policy thing.

When I try to do a request to the Google Maps API I have no problems:

var jsonData = $.ajax({
        url:"http://maps.googleapis.com/maps/api/geocode/json?address=",
        dataType:"json",
        async:true,
        success: function(json){...}
}

I think that is because Google Maps API allow Access-Control-Allow-Origin. But when I try to use the openls.geog.uni-heidelberg.de API I get the cross-origin error:

var xmlData = $.ajax({
              type: "GET",
              url:"http://openls.geog.uni-heidelberg.de/route?"
              //dataType:"jsonp xml",
              dataType: "xml",
              async:true,
              crossDomain : true,
              success: function(xml){...}
}

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

One think I dont understand is if the openls API doesn't allow cross-origin why can do a request directly from my browser just typing the url like:

http://openls.geog.uni-heidelberg.de/route?start=9.256506,49.240011&end=8.72083,49.7606&via=&lang=de&distunit=KM&routepref=Bicycle&weighting=Shortest&avoidAreas=&useTMC=false&noMotorways=false&noTollways=false&noUnpavedroads=false&noSteps=false&noFerries=false&instructions=false

But I can not do it using jquery. I have also tried the jsonp solution but it's not working with xml.

Some idea of what is going on?

kramer
  • 31
  • 1
  • 3
  • Try to change `dataType` to `jsonp` - I think in current example you can use JSONP and not CORS. – Kristian Vitozev Oct 05 '15 at 10:40
  • @unixarmy given that it's returning XML I don't think JSONP is going to work. – Rory McCrossan Oct 05 '15 at 10:42
  • Ah, sorry, I didn''t notice that. You're right! :) – Kristian Vitozev Oct 05 '15 at 10:42
  • 2
    @kramer You will need to use a server side proxy to achieve this, ie. JS AJAX request to local server -> remote server, request received, response sent, remote server -> local server -> AJAX request to JS. – Rory McCrossan Oct 05 '15 at 10:42
  • 1
    Server proxy is the best way to go. Also, it works when you access the url directly because you have no origin when you do that. You should contact the website administrator to report the issue, it's weird to offer a public API and not enable CORS. – Shanoor Oct 05 '15 at 10:51
  • @RoryMcCrossan ShanShan thanks for your answer, do you suggest some good free proxy to achieve that? – kramer Oct 06 '15 at 09:31
  • Finally I used another GraphHopper API for map routing, it's not free but at least works and doesn't have as much bugs as Open Route Service API – kramer Oct 07 '15 at 10:15

1 Answers1

3

i struggled for way too long with CORS issues caused by the interaction of two projects running locally (Angular App and Node.JS Webservices)

Behold the short easy workaround : Chrome's plugin AllowControlAllowOrigin.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Just switch the radio button from red to green, and no more blocked request, error or warning ! I hope it'll work with your API, Of course it isn't a permanently solution but that's a great way to avoid loosing time on those anoying recurrent issues.

Clément Mabileau
  • 31
  • 4