Geek Answers Handbook

Make CORS Ajax Requests Using XMLHttpRequest

This is the code for checking geoJSON according to the provided sample:

function processSuccess(data){ if(data.status==="ok") console.log("You just posted some valid geoJSON"); else if(data.status==="error") console.log("There was a problem with your geoJSON "+data.message); } function processError(data){ console.log("The AJAX request could not be successfully made"); } $.ajax({ url: 'http://geojsonlint.com/validate', type: 'POST', data: geo, dataType: 'json', success: processSuccess, error: processError });

I am trying to check geoJSON with the following code:

  var getXHR=function() { try{return new XMLHttpRequest();} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){} try{return new ActiveXObject("Microsoft.XMLHttp");} catch(e){} console.err("Could not find XMLHttpRequest"); }; var makeRequest=function(uri,data) { //make the actual XMLHttpRequest var xhr=getXHR(); if('withCredentials' in xhr) console.log("Using XMLHttpRequest2 to make AJAX requests"); xhr.open("POST",uri,true); xhr.onreadystatechange=function(){ if(xhr.readyState===4) { if(xhr.status===200 || xhr.status===304) { var response=JSON.parse(xhr.responseText); if(response.status==="ok") console.log("You just posted some valid geoJSON"); else if(response.status==="error") console.log("There was a problem with your geoJSON "+response.message); else console.log("Response has been recieved using "+response.status); } } else console.log("Response recieved with status "+xhr.status); }; xhr.setRequestHeader("Content-Type","application/json"); xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"); //supported in new browsers...do JSONP based stuff in older browsers...figure out how xhr.setRequestHeader("Access-Control-Allow-Origin","http://geojsonlint.com/"); xhr.setRequestHeader("Accept","application/json"); xhr.send(JSON.stringify(data)); };

Here I am making the actual request:

  makeRequest('http://geojsonlint.com/validate',geo);

Mistake:

I get this error in the Chrome console:

  Using XMLHttpRequest2 to make AJAX requests gmaps_geoJSON.js:14 Failed to recieve response gmaps_controls.js:25 XMLHttpRequest cannot load http://geojsonlint.com/validate. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

HEADERS

This is the data related to the query:

 Request URL:http://geojsonlint.com/validate Request Method:OPTIONS Status Code:200 OK Request Headers Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8,en-AU;q=0.6,en-GB;q=0.4,te;q=0.2 Access-Control-Request-Headers:access-control-allow-origin, accept, x-requested-with, content-type Access-Control-Request-Method:POST Connection:keep-alive DNT:1 Host:geojsonlint.com Origin:http://localhost:8180 Referer:http://localhost:8180/GoogleMapsLoadingTest/MainService? scenario=c&operation=1&objkey=000011&objtype=EQUI&gisuniqkey=hgsfsfsfs2436353535 User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36 Response Headers Access-Control-Allow-Headers:Origin,Content-Type,Accept Access-Control-Allow-Methods:POST,GET,OPTIONS,PUT,DELETE Access-Control-Allow-Origin:* Connection:keep-alive Content-Encoding:gzip Content-Type:text/html; charset=utf-8 Date:Thu, 24 Apr 2014 14:48:57 GMT Server:nginx Transfer-Encoding:chunked
+7
javascript jquery ajax cors
source share
1 answer

You should not set Access-Control-Allow-Origin as the request header, but the response header.

You can see from the answer which request headers the server will accept:

 Access-Control-Allow-Headers:Origin,Content-Type,Accept

And the error message tells you that:

 Request header field Access-Control-Allow-Origin is not allowed

It seems like he cannot accept X-Requested-With .

+10
source

More articles:


All Articles