title: Ajax cross-domain request to REST api
body: <p>I have REST api on backend. I need to make ajax request to POST some data and I write:</p>
  
  <pre><code>$(function() { 
      $('#createPin').click(function(e) { 
          e.preventDefault();
  
  var urlAjax = "http://www.agroagro.com/test/v1/register";
  
  $.ajax({
  type: "POST",
  url: urlAjax,
  contentType: "application/x-www-form-urlencoded",
  data: {
                      name: "Mile3",
                      email: "new1@new.com",
                      password: "face1book"
                  },
    crossDomain:true, 
    success: function(data) { console.log(data); },
  error: function(data) {console.log(data); },
  dataType: 'json',
  beforeSend: function (xhr) {
              xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
          },
          headers: {
              'Access-Control-Allow-Origin': '*'
          }
  });
  
  
  }); 
  });
  </code></pre>
  
  <p>but on click I get:</p>
  
  <pre><code>         OPTIONS http://www.agroagro.com/test/v1/register jquery-latest.min.js:4 sendjquery-latest.min.js:4 m.extend.ajaxtest.html:114 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 r.handle
  
      XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. Invalid HTTP status code 404
  
      Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, 
  
  setRequestHeader: function, overrideMimeType: function…}
  </code></pre>
  
  <p>But when I try to run <a href="http://www.agroagro.com/test/v1/register" rel="nofollow">http://www.agroagro.com/test/v1/register</a> on <code>Chrome Advanced Rest Client extension</code> then all works fine... How and why? What is wrong with my ajax request? </p>
  
  <p><strong>See IMAGE</strong>: <a href="http://i.imgur.com/Ms0oBK9.png" rel="nofollow">http://i.imgur.com/Ms0oBK9.png</a> - <strong>as you can see all works great with that extension cross domain.</strong></p>