title: XMLHttpRequest/ajax set Content-Type
body: <p>I've tried both these things separately:</p>
  
  <p>note: url is a variable containing a https url and jsonString contains a valid json string</p>
  
  <pre><code>var request = new XMLHttpRequest();
  try{
      request.open("POST", url);
      request.setRequestHeader('Accept', 'application/json');
      request.send(jsonString);
  } catch(e) {
      alert(e);
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var options = {
      type: "POST",
      url: url,
      dataType: "json",
      data: jsonString,
      accept: "application/json"
  };
  
  $.ajax(options)
  </code></pre>
  
  <p>The problem is the system we are posting to requires a header Content-Type with a value "application/json".</p>
  
  <p>With the way things are right now, the method used is POST, the Accept header is "application/json", and the Content-Type defaults to "application/x-www-form-urlencoded; charset=UTF-8"</p>
  
  <p>In the first example, if <code>request.setRequestHeader('Content-Type', 'application/json')</code>; is added 1 line above or below the Accept header, the method used changes to OPTIONS, the Accept header changes to <strong>"text/html,application/xhtml+xml,application/xml;q=0.9,<em>/</em>;q=0.8"</strong> and the <strong>Content-Type</strong> header disappears as if it wasn't seen.</p>
  
  <p>In the second example, if <strong>contentType: "application/json"</strong> is added anywhere within options, the same thing happens that happened in the first example.</p>
  
  <p>What is the proper way to set a Content-Type header in ajax or XMLHttpRequest?</p>
  
  <p><strong>Edit:</strong> I should add that using the firefox rest client plugin, the json string, url, and accept and content type headers all work fine. We just can't seem to get the content header set on our own page.</p>