How to get a cross-origin resource sharing (CORS) post request working How to get a cross-origin resource sharing (CORS) post request working ajax ajax

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+"&region=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.