title: Can't perform CORS request using Angularjs
body: <p>I am writing my first AngularJS app and have run into a problem with CORS in Angular. Have tried what was mentioned in this <a href="https://stackoverflow.com/questions/15411818/setting-up-cors-with-angular-js">reply</a> but still have no luck solving this.</p>
  
  <p>The JS code (main.js) is as follows:</p>
  
  <pre><code>var app = angular.module("app",[]);
  app.config(['$httpProvider', function($httpProvider) {
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
      }
  ]);
  
  app.controller("AppCtrl", function ($scope, $http) {
      var postData = "username=demo&amp;password=demo";
      $http.post("http://sampleurl.com/login",postData).success(function(data, status, headers, config)
      {
          console.log(data);
      });
  
  });
  </code></pre>
  
  <p>The Index.html file is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Sample Angular App&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="app" ng-controller="AppCtrl as app"&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The error I get is the following: </p>
  
  <pre><code>Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 
  </code></pre>
  
  <p>I have tried running this request using Ajax and it works just fine with Ajax. For some reason can't get this to work using Angular. Any idea as to what I am doing wrong here?</p>
  
  <p>Thanks!</p>