How to get a cross-origin resource sharing (CORS) post request working
I finally stumbled upon this link "A CORS POST request works from plain javascript, but why not with jQuery?" that notes that jQuery 1.5.1 adds the
Access-Control-Request-Headers: x-requested-with
header to all CORS requests. jQuery 1.5.2 does not do this. Also, according to the same question, setting a server response header of
Access-Control-Allow-Headers: *
does not allow the response to continue. You need to ensure the response header specifically includes the required headers. ie:
Access-Control-Allow-Headers: x-requested-with
REQUEST:
$.ajax({ url: "http://localhost:8079/students/add/", type: "POST", crossDomain: true, data: JSON.stringify(somejson), dataType: "json", success: function (response) { var resp = JSON.parse(response) alert(resp.status); }, error: function (xhr, status) { alert("error"); } });
RESPONSE:
response = HttpResponse(json.dumps('{"status" : "success"}'))response.__setitem__("Content-type", "application/json")response.__setitem__("Access-Control-Allow-Origin", "*")return response
I solved my own problem when using google distance matrix API by setting my request header with Jquery ajax. take a look below.
var settings = { 'cache': false, 'dataType': "jsonp", "async": true, "crossDomain": true, "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"®ion=ng&units=metric&key=mykey", "method": "GET", "headers": { "accept": "application/json", "Access-Control-Allow-Origin":"*" } } $.ajax(settings).done(function (response) { console.log(response); });
Note what i added at the settings
**
"headers": { "accept": "application/json", "Access-Control-Allow-Origin":"*" }
**
I hope this helps.