CODEWITHSUNDEEP
javascriptajaxdjangohttp-headersxmlhttprequest
Aleksander Korovin
Aleksander Korovin

Reputation: 349

Cross domain ajax request headers on different servers

When I try to send cross domain request to google.docs url it works, but when i try to send it to server on another domain, it gives error:

 XMLHttpRequest cannot load http://katrin.kit.edu/adei/services/getdata.php?db_server=orca&db_name=orca_process&db_group=Data_001_PAC_dat&db_mask=0,1,2,3,4,5,6,7&window=-1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

But when i try google.doc it return normal parsed object without any error.

My request:

 function ajax(url, callback, filetype, type) {
filetype = filetype ? filetype : 'json';
type = type ? type : 'GET';
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var success = function(e) {
    var items = '';
    switch(filetype) {
        case 'csv': items = csv(xhr.responseText); break;
        case 'json': items = JSON.parse(xhr.responseText); break;
        default: items = xhr.responseText; break;
    }
    callback(items);
}
var error = function(e) { console.log('Please enabled CORS using  access-control-allow-origin'); }
if (window.XDomainRequest && !sameOrigin(url)) { xhr = new XDomainRequest(); xhr.onload = success; }
if (filetype == 'image' && xhr.overrideMimeType) { xhr.overrideMimeType('text/plain; charset=x-user-defined'); }
xhr.onerror = error;
xhr.onreadystatechange = function(e) { if (xhr.readyState == 4 && xhr.status == 200) { success(e); } }
try {
    if ('withCredentials' in xhr) { xhr.open(type, url, true); }
    else { xhr.open(type, url); }
    xhr.send(null);
}
catch(e) { error(e); }
}

// check if url is same domain

function sameOrigin(url){
   var split = url.split('/');
   if (split[0]+'//' == window.location.protocol+'//') { return split[2] != window.location.host ? false : true; }
   else { return true; }
}

// calculate length of object

function size(obj) {
  var size = 0, key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
  }
 return size;
}

I tried to change headers, but there is still issues:

Here is headers for myserver url: myanotherserverurl

Here is headers for google doc url: enter image description here

Secondly I've tried to setup myserver-localhost. Added some headers to response like:

def index(request):
data = {
    'title': getattr(settings, 'TITLE'),
    'description': getattr(settings, 'DESCRIPTION')
}
response = render_to_response('dimension/index.html', data, context_instance=RequestContext(request))

response['Access-Control-Allow-Origin'] = '*'  
response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'  
response['Access-Control-Max-Age'] = '1000'  
response['Access-Control-Allow-Headers'] = '*'  
return response

But i think the problem is not related with my localhost server.

And I tried jsonp library. It works, but actually with only json files. But i need different formats like csv.

Thanks in advance!

Upvotes: 0

Views: 774

Answers (1)

halkujabra
halkujabra

Reputation: 2942

To make cross domain request, the domain that you are requesting to should give you permission and that permission is sent back in header to the browser as the response to the request. If the browser finds that your name is not in list of allowed clients, the browser will show you error. So, you just can't make a request at any domain. This is to prevent CSRF- Cross Site Request Forgery.

Upvotes: 2

Related Questions