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)

Answer 1

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.