Issue with CORS for AngularJS and Silex (PHP - Apache)

Question

I'm trying to configure CORS but i don't know what i'm missing. I'm using Silex (PHP - Apache) as backend and AngularJS as front-end. I have this configuration in .htaccess:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

In the app configuration for angularJS, i have:

myApp.config(['$httpProvider', function($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
    ]);

My service in angularJS goes like this:

var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin'
    };
    var restConfig = {
        method: 'POST',
        dataType : 'json',
        url: 'http://localapi.com/user/create',
        data: paramData,
        headers: headers
    };
    return $http(restConfig)
        .success(function (a) {
             console.log('works');
        }).error(function (m) {
             console.log('does not work');
        });

And all I can see in the network for this call is

create | OPTION | (failed)
/user  |        | net::ERR_EMPTY_RESPONSE

While, with curl i get this response

curl -I http://localapi.com/user/create

    HTTP/1.1 200 OK
    Date: Tue, 17 Feb 2015 01:46:06 GMT
    Server: Apache/2.2.26 (Unix) DAV/2 PHP/5.4.24 mod_ssl/2.2.26 OpenSSL/0.9.8y
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, PATCH, DELETE
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin
X-Powered-By: PHP/5.4.24
    Cache-Control: no-cache
    Content-Type: application/json

And i don't know what i'm missing. I have angular running in nodeJS in the port 5000. Can someone give me a tip to fix this?

score 2 · Answer 1 · edited May 23 '17 at 12:00

This headers only work on the server, so there is not need to set them in angular:

var headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin'
};

In angular you should set something like:

headers: {
    'Content-Type': 'application/json; charset=UTF-8',
    'Accept': 'application/json, */*; q=0.01',
    'X-CSRFToken': undefined
},

Here es how to set the csrf token: AngularJS + Django Rest Framework + CORS ( CSRF Cookie not showing up in client )

Also using the developer tools of your web browser you can see exactly how is your request been send.

Issue with CORS for AngularJS and Silex (PHP - Apache)

1 Answers1