AngularJS Post request does not work correctly on

Question

I'm writing a website with AngularJS which communicates with an API on the server and provides some Info. for Log in part I should send a http post request containing Email, Password and etc. It works fine on google Chrome and IE. I mean it sends the post request and gets a token. But in FireFox as I checked in Network, It sends an OPTION request and gets 200 but after that it does not send any post! hence my login would not disappear and I wont get any token.

what should I do for this situation?

App.config :

  $httpProvider.defaults.withCredentials = true;
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8;';
  $httpProvider.interceptors.push('httpRequestInterceptor');

Function in service which sends request :

    this.loginEmail = function(f_email, f_pass, deviceModel, deviceOs) {
    var data = $.param({
            email: f_email,
            password: f_pass,
            device_model: deviceModel,
            device_os: deviceOs
        });

        return $http({
            method: "POST",
            url: app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id,
            data: data
        }).success(function(response){
            return response.status;
        });
    /*return $http.post(app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id, data).success(function(response){
        return response.status;
    }).error(function(response){
        return response.status;
    });*/
};

Server Credentials are true

CORS seems fine because I can do get request

EDIT: Here's another thing that may be related to this problem: in Chrome when I get logged in for get requests it sends the Token header but for Post it doesn't

httpRequestInterceptor :

app.factory('httpRequestInterceptor', function ($cookieStore) {
     return {
        request: function (config) {

        config.headers['Authorization'] = $cookieStore.get('Auth-Key');;
        config.headers['Accept'] = 'application/json;odata=verbose';
        return config;
     }
   };
});

Answer 1

The problem was caused by apache configurations.

before:

Access-Control-Allow-Headers: "authorization"

after:

Access-Control-Allow-Headers: "authorization, Content-type"

UPDATE :

On CORS requests if API requires some special headers like Auhtorization Token you must return all OPTIONS requests 200(ok!) if not the solution above would not work anyway. Here's the code:

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit();
}

UPDATE 2 : This OPTIONS problem occurs in REST framework for Django! For OPTIONS it evaluates the request by pursing whole api if there was a problem in it, you'll get error even though you have required permissions for sending request!

Example:

Suppose that there's a url like api/profile which needs an Authorization header for responsing profile details. You want to send the Cross Domain request for getting it. You set the right headers and click! You'll get unauthorized error! Why? Because the pre flighted request(OPTIONS) does not include any special header and browser sends it to server, server with REST framework evaluates the OPTIONS request by checking the whole request(get request with authorization header) but OPTIONS doesn't have any authorization header so this request is unauthorized!

DEVELOPMENTAL SOLUTION : This problem can be solved either by Client-Side or Back-End. Front-End developer can install following plugin on chrome:

Allow-Control-Allow-Origin: *

Back-End developer can install a package which enables CORS on Django Framework.