CORS error with AngularJS message only in FireFox

Question

I only have problems with FireFox when creating a cross-search request in an Ionic application (therefore it uses AngularJS). The js application does $ http.post () for the Laravel 5.1 API, and I get the following error only in FireFox (39.0.3):

Cross-request request is blocked: a policy of the same origin prohibits reading the remote resource at http://blah.dev/endpoint . (Reason: missing token "content type" in the CORS header "Access-Control-Allow-Headers" from the CORS preview channel).

This is on my localhost (OSX Mavericks). and works great in Chrome and Safari, only FireFox is provided. I cleared the cache and tried in the "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 found this question , which seems to have a similar problem only in FireFox, but the solution was for the comma to separate Allow-Methods , which I already have.

Answer 1

The message "Invalid token" content type "" refers to the client. For an HTTP request to be valid, it must have a header

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

or

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

The first type of content is the most common.

In angularjs, one way to request a CORS submission is to

 $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 using header('Access-Control-Allow-Origin', '*') , the CORS message should succeed without authentication and credentials.

Answer 2

on the back try putting

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

and on the front try to put

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