[Tip] Enabling CORS - debug, server-side (apache conf) & client-side (angularjs) flavors

The right start

As much as it pains me to say, knowing I'm a real firefox fan, the chrome error messages are WAY more self-explanatory than the crap firefox is displaying (as of 24 september 2014).
So for this part, stick to Chrome for debugging.

Demistifying CORS & angularjs configuration

As of the 1.2 (tested on 1.2.15), NO modification is required ! CORS is enabled by default. Unless you don't control the server and the headers sent by angular are not allowed on it (in this case delete $httpProvider.defaults.headers.common['header-to-remove']; should suffice).

Server-side configuration

The enable CORS website has good informations, but too incomplete in my opinion.
To deal with an angular frontend app, the server need to allow some *specific* headers :
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

"complete" apache configuration

Don't forget to enable the header module : a2enmod headers
Then in .htaccess or directly in .conf file :

Header set Access-Control-Allow-Origin "* or http://the.website.you.want.to.allow"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

Bonus - Allow "complex" requests

Since the browsers send a pre-flight check (OPTIONS http request) to the server before a POST with data (and put or delete), you'll need to configure apache to always return a 200 OK in response to thoses requests :

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

You also need to add always to all header directive :

Header always add|set Access-Control-Allow-...

All credits and my humble admiration to [email protected] (accepted answer).

Bonus2 - allow multiple origin

I just CANNOT explain the W3C choices around origin : you can define only one domain (or subdomain) or a wildcard to accept all domains.
To work around this problem, you need to dynamically set Access-Control-Allow-Origin after checking the origin :

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www\.)?(domain1.io|domain2.else)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true
</IfModule>



The complicatedness of this feature is sucking the like out of me.