title: why does normal post to another domain work but xhr.send or ajax post not
body: <p>I have a form where i post data to a webagent which is on another domain(the form is on localhost and the post is to a <a href="http://thisisnotareallink.com" rel="nofollow">http://thisisnotareallink.com</a>)</p>
  
  <p>If i use: </p>
  
  <pre><code>&lt;form id="msform" action="http://thisisnotareallink.com"method="post"&gt;
  </code></pre>
  
  <p>then it works and i get data like bla=2&amp;dsaf=2</p>
  
  <p>but if i use:</p>
  
  <pre><code> &lt;form id="msform"  method="post"&gt;
  </code></pre>
  
  <p>and then in script have something like:</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
    xhr.open(form.method, 'http://thisisnotareallink.com', true);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  
  
    // send the collected data as JSON
    xhr.send(JSON.stringify($('#msform').serializeObject()));
  </code></pre>
  
  <p>or</p>
  
  <pre><code> $.ajax({
    url: "http://thisisnotareallink.com",
    type: "POST",
    dataType: "json", // expected format for response
    contentType: "application/json", // send as JSON
    data: JSON.stringify($('#msform').serializeObject()),
  </code></pre>
  
  <p>then if i check the chrome inspector > Network > XHR then i get:</p>
  
  <p><strong>No 'Access-Control-Allow-Origin' header is present on the requested resource</strong></p>
  
  <p>why is this so ?</p>