In my attempts, I have tested the following methods individually:
Please note: The variable "url" contains an HTTPS URL and "jsonString" contains a valid JSON string.
var request = new XMLHttpRequest();
try{
request.open("POST", url);
request.setRequestHeader('Accept', 'application/json');
request.send(jsonString);
} catch(e) {
alert(e);
}
and
var options = {
type: "POST",
url: url,
dataType: "json",
data: jsonString,
accept: "application/json"
};
$.ajax(options)
The issue we are facing is that the platform to which we are posting requires a header Content-Type with the value of "application/json".
As it stands currently, in the first method, when
request.setRequestHeader('Content-Type', 'application/json')
; is added 1 line above or below the Accept header, the method changes to OPTIONS, the Accept header becomes "text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8", and the Content-Type vanishes as if it was not recognized.
Similarly, in the second method, adding contentType: "application/json" anywhere within the options results in the same issue encountered in the first example.
What would be the correct way to set a Content-Type header in ajax or XMLHttpRequest?
Edit: It is worth mentioning that using the Firefox REST client plugin, everything - including the json string, URL, accept and content-type headers - works flawlessly. However, we are unable to set the content header on our own page.