title: Cannot load web api method using Backbone.js
body: <p>I have a blank asp.net solution with 5 different projects. One of them is asp.net web api and other one is blank web site with bunch of html pages. I am using backbone.js/jQuery to make calls to the web api within the solution. My blank web site is running on different port and my web api is running on different port.</p>
  
  <pre><code>//Collection
  var AuditsCollection = Backbone.Collection.extend({
  
      url: 'http://localhost:56501/api/searchaudits',
  
      sync: function (method, model, options) {
                  if (!options.crossDomain) {
                      options.crossDomain = true;
                  }
  
                  options.timeout = 1000;
                  alert(method + ": " + JSON.stringify(model));
                  return Backbone.sync(method, model, options);
              },
  });
  var audits = new AuditsCollection();
  
  // Model
  var Audit = Backbone.Model.extend({ });
  var audit = new Audit({ auditNumber: "A12" });
  
  audits.add(audit);
  </code></pre>
  
  <p>// POST CALL - I am sending this model and expecting back another JSON object in response.</p>
  
  <pre><code> audit.save({}, {
  
      success: function (response) {
          alert("Got audits successfully" + response);
      },
      error: function (response) {
  
          alert("Error.. Go home now");
      }
  });
  </code></pre>
  
  <p>I still get this error</p>
  
  <p>XMLHttpRequest cannot load <code>http://mydomain:56501/api/searchaudits</code>. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. </p>