CORS error with AngularJS post only in FireFox

Question

I am having issues only with FireFox when making a cross origin request in an Ionic app (so it's using AngularJS). The js app is doing a $http.post() to a Laravel 5.1 API, and I get the following error only in FireFox (39.0.3):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://blah.dev/endpoint. (Reason: missing token 'content-type' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

This is on my localhost (OSX Mavericks). and works fine in Chrome and Safari, only FireFox is given the error. I have cleared the cache, and tried in a "private window", with the same results.

Here is the Laravel route defined to handle the OPTIONS request:

Route::options('endpoint', function() {
    return response('OK')
        ->header('Access-Control-Allow-Headers ', 'Origin, Authorization, X-Requested-With, Content-Type, Accept')
        ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0')
        ;
});

Route::post('endpoint', array('uses' => '\Path\To\Controller@endpoint'));

I did find this question that seems to have a similar issue only in FireFox, but the solution was to comma separate the Allow-Methods, which I already am.

Do you have $httpProvider.defaults.withCredentials = true; set in AngularJS .config()? — user12121234, Aug 09 '15 at 19:58
I do not. I added it to the `config` object in the $http.post(), and it now complains the `Access-Control-Allow-Origin` does not match `'*'`. Some quick research shows I am not supposed to use `'*'` when using `withCredentials: true`, but even changing the `Access-Control-Allow-Origin` to `http://localhost:8100/#/clientpage` (and every variation I can think of), it still returns an error the it does not match the `Access-Control-Allow-Origin` header. This concept is new to me, is there a good minimal example you can recommend. Also, why did it work before in other browsers, just not FireFox? — shauno, Aug 09 '15 at 21:02
Yes CORS is a little tricky, do some reading and you should be able to figure it out. — user12121234, Aug 10 '15 at 00:31
Have you found a solution? I'm completely stuck with this problem. — ownking, Dec 23 '15 at 00:15

Greg Kelesidis · Answer 1 · 2016-08-06T14:55:42.037

The message " missing token 'content-type' " is about the client. For a http request to be a valid post one, it must have a header

'Content-Type': 'application/x-www-form-urlencoded'

or

'Content-Type': 'multipart/form-data'

The first content-type is the most common one.

In angularjs one way to do a CORS post request is

$http.post(
        'http://external-domain.ext/the/rest/url',
        'param_name=param_value',
        {headers:{'Content-Type': 'application/x-www-form-urlencoded'}}
    ).
    then(function successCallback(response) {
       $scope.something = response;
    }, function errorCallback(response) {
       // not good
    });

If the server is configured with header('Access-Control-Allow-Origin', '*'), the CORS post must succeed without authentication and credentials.

score 0 · Answer 2 · answered Aug 10 '15 at 00:33

on the back end try putting

->header('Access-Control-Allow-Credentials', 'true')

and on the front end try putting

.config(function($locationProvider, $httpProvider) {
    // CORS requests with credentials
    $httpProvider.defaults.withCredentials = true;
})

CORS error with AngularJS post only in FireFox

2 Answers2