AngularJS $http, CORS and http authentication

Some time ago I had a task for the company where I work. The task had to use CORS. I am writing this article to share lesson learned.

You want to send POST request to different domain with AngularJS $http service? There is several tricky thing into AngularJS and server setup.

First: In your application config you must to allow cross domain call

    /**
     *  Cors usage example. 
     *  @author Georgi Naumov
     *  gonaumov@gmail.com for contacts and 
     *  suggestions. 
     **/ 
    app.config(function($httpProvider) {
        //Enable cross domain calls
        $httpProvider.defaults.useXDomain = true;
    });

Second: You must specify withCredentials: true and username and password into request.

     /**
      *  Cors usage example. 
      *  @author Georgi Naumov
      *  gonaumov@gmail.com for contacts and 
      *  suggestions. 
      **/ 
       $http({
      url: 'url of remote service',
      method: "POST",
      data: JSON.stringify(requestData),
      withCredentials: true,
      headers: {
       'Authorization': 'Basic bashe64usename:password'
      }
     });

Тhird: Server setup. You must provide:

    /**
     *  Cors usage example. 
     *  @author Georgi Naumov
     *  gonaumov@gmail.com for contacts and 
     *  suggestions. 
     **/ 
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Origin: http://url.com:8080");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

For every request. When you receive OPTION you must pass:

    /**
     *  Cors usage example. 
     *  @author Georgi Naumov
     *  gonaumov@gmail.com for contacts and 
     *  suggestions. 
     **/ 
    if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
       header( "HTTP/1.1 200 OK" );
       exit();
    }

HTTP authentication and everything else comes after that. Here is complete example of usage of server side with php.

   /**
     *  Cors usage example. 
     *  @author Georgi Naumov
     *  gonaumov@gmail.com for contacts and 
     *  suggestions. 
     **/ 
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Origin: http://url:8080");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    
    if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
       header( "HTTP/1.1 200 OK" );
       exit();
    }
    
    
    $realm = 'Restricted area';
    
    $password = 'somepassword';
    
    $users = array('someusername' => $password);
    
    
    if (isset($_SERVER['PHP_AUTH_USER']) == false ||  isset($_SERVER['PHP_AUTH_PW']) == false) {
        header('WWW-Authenticate: Basic realm="My Realm"');
    
        die('Not authorised');
    }
    
    if (isset($users[$_SERVER['PHP_AUTH_USER']]) && $users[$_SERVER['PHP_AUTH_USER']] == $password) 
    {
        header( "HTTP/1.1 200 OK" );
        echo 'You are logged in!' ;
        exit();
    }
    ?>

Here can be found me question in stackoverflow.