Access-Control-Allow-Origin error with XMLHttpRequest - django

Question

I'm developing a Django server. I need to get some data from an external service here.
Here is the JavaScript code that I'm using:
function getDeclination(latitude, longitude) {
var url = 'http://www.ngdc.noaa.gov/geomag-web/calculators/calculateDeclination';
url += '?';
url += 'lat1=' + latitude;
url += '&'
url += 'lon1=' + longitude;
url += '&';
url += 'resultFormat=xml';
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", url, false );
xmlHttp.send();
xml = xmlHttp.responseXML;
var temp_d = xml.getElementsByTagName('declination');
var string = temp_d[0].childNodes[0].nodeValue;
string = string.substring(1, string.length - 2);
return parseFloat(string);
}
Using this code for a call like this getDeclination(46.0815605783, 13.2158580422) rise this error:
XMLHttpRequest cannot load
http://www.ngdc.noaa.gov/geomag-web/calculators/calculateDeclination?lat1=46.0815605783&lon1=13.2158580422&resultFormat=xml.
Origin http://127.0.0.1:8000 is not allowed by Access-Control-Allow-Origin
How can I get rid of this problem and return to testing?
EDIT:
So I installed the middleware and the JS, but I can't get results.
Perhaps I have done some error during the installation of the middleware, it's the first time for me.
I know that Django found it, and that it's udsing it, but I don't know if I have done the setup correctly.
XS_SHARING_ALLOWED_ORIGINS = "http://127.0.0.1:8000"
XS_SHARING_ALLOWED_METHODS = ['POST','GET','OPTIONS', 'PUT', 'DELETE']
I have put this code in settings.py, is this correct? Because I still get the same error.

Answer 1

Use this middleware while you're developing, and disable it when you put everything into production.
Edit:
As for the Javascript side of things, I've just tested this and it works ok. It does require jQuery and the middleware to be installed though.
function getDeclination(latitude, longitude){
var url = "http://www.ngdc.noaa.gov/geomag-web/calculators/calculateDeclination";
url += "?";
url += "lat1=" + latitude;
url += "&"
url += "lon1=" + longitude;
url += "&";
url += "resultFormat=xml";
$.ajax({
url: url,
success: function(data){
var declination = parseFloat($(data).find("declination").text());
alert(declination);
}
});
}

Answer 2

In the end I implemented the code to get the declination from a server call.
For sake of completeness here is the code:
import urllib2
from xml.dom.minidom import parseString
# build the url
def buildUrl(latitude, longitude):
return settings.MAGNETIC_URL + '?' + 'lat1=' + str(latitude) + '&' + 'lon1=' + str(longitude) + '&' + 'resultFormat=xml'
# load the page from the address
def retrieveWeb(address):
try:
web_handle = urllib2.urlopen(address)
except urllib2.HTTPError, e:
error_desc = BaseHTTPServer.BaseHTTPRequestHandler.responses[e.code][0]
print "Cannot retrieve URL: HTTP Error Code", e.code, "Error: ", error_desc
sys.exit(1)
except urllib2.URLError, e:
print "Cannot retrieve URL: " + e.reason[1]
sys.exit(1)
except:
print "Cannot retrieve URL: unknown error"
sys.exit(1)
return web_handle
# main function to get declination
def retrieveDeclination(lat, lng):
# build url
address = buildUrl(lat, lng)
# get the page
page = retrieveWeb(address)
# get xml
xml = page.read()
page.close()
# inizio il parsin
dom = parseString(xml)
#retrieve the first xml tag (<tag>data</tag>) that the parser finds with name tagName:
xmlTag = dom.getElementsByTagName('declination')[0].toxml()
#strip off the tag (<tag>data</tag> ---> data):
xmlData=xmlTag.replace('<declination>','').replace('</declination>','')
# parse the output as float
return float(xmlData)