overcoming access-control-allow-origin in simple web map site

Question

I am trying to set up a simple web page, that will draw a map with some openstreetmap data. I am serving the page for now with a (python) simpleHTTPserver on port 8000 of my local machine.

In my page I run a script that sends an AJAX request to openstreetmap.org:

$(document).ready(function() {
    console.log ("Document is loaded.");

    var map = L.mapbox.map('mapsection', 'examples.map-vyofok3q');

    $.ajax({
      url: "http://www.openstreetmap.org/api/0.6/way/252570871/full",
      dataType: "xml",
      success: function (xml) {
        var layer = new L.OSM.DataLayer(xml).addTo(map);
        map.fitBounds(layer.getBounds());
      }
    }); // end ajax
});

(The L. refers to Leaflet javascript libraries I included.) I am having trouble with same origin policy errors. Chrome says, "XMLHttpRequest cannot load http://www.openstreetmap.org/api/0.6/way/252570871/full. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

In serving the HTTP locally I followed the advice from a promising SO answer Can I set a header with python's SimpleHTTPServer? and so I ran $ python ajax-allower.py where ajax-allower.py contains the code below. Can you explain why I still get the error, and suggest how I can get around it?

#!/usr/bin/env python
# runs the simple HTTP server while setting Access-Control-Allow-Origin
# so that AJAX requests can be made.
import SimpleHTTPServer

class MyHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_my_headers()

        SimpleHTTPServer.SimpleHTTPRequestHandler.end_headers(self)

    def send_my_headers(self):
        self.send_header("Access-Control-Allow-Origin", "http://www.openstreetmap.org")
        #self.send_header("Access-Control-Allow-Origin", "*")


if __name__ == '__main__':
    SimpleHTTPServer.test(HandlerClass=MyHTTPRequestHandler)

score 3 · Accepted Answer · answered Feb 21 '14 at 08:47

3

The ajax request fails because the object in question has been deleted.

If you try it with an object that still exists (e.g. http://www.openstreetmap.org/api/0.6/way/666/full), your jQuery code should perfectly work. Or if you grab the full history of the deleted object (http://www.openstreetmap.org/api/0.6/way/252570871/history), but that's probably not really what you want, I suppose.

It should be said, that the API probably should also send the CORS-headers for the failing (HTTP 410 Gone) requests, so that your client can detect the error code. This looks like a bug that should be reported on github.

answered Feb 21 '14 at 08:47

tyr

1,779
1
15
15

2

Thanks. I have reported the bug as you suggested, at https://github.com/openstreetmap/openstreetmap-website/issues/708 – user1416227 Feb 21 '14 at 16:45
On requesting the existing resource that you pointed to, my same-origin problem went away. (Thanks.) I had thought that the responsibility for refusing to allow DOM changes lay with my original web server, the one I launched with SimpleHTTPserver and whose code I put in the question. But your comment suggests the server in charge is the OSM server to which I made the AJAX request. Is that right? – user1416227 Feb 21 '14 at 19:34
Yes. But if you (in the meantime) still want to use your python proxy script, you'd have to set _your_ domain for the *Access-Control-Allow-Origin* header, not `openstreetmap.org` (or simply use the wildcard `*` as in the commented out line). – tyr Feb 21 '14 at 19:47
Can you recommend a good place/book/video/site to teach myself the basics of the same origin policy? – user1416227 Feb 21 '14 at 20:02
1

Hm, I guess that [this list on enable-cors.org](http://enable-cors.org/resources.html) is a good starting point. Other than that I only know the [wikipedia page](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) and the [official specs](http://www.w3.org/TR/cors/). – tyr Feb 21 '14 at 21:00

overcoming access-control-allow-origin in simple web map site

1 Answers1