AngularJS POST Fails: Response for preflight has invalid HTTP status code 404

Question

I know there are a lot of questions like this, but none I've seen have fixed my issue. I've used at least 3 microframeworks already. All of them fail at doing a simple POST, which should return the data back:

The angularJS client:

var app = angular.module('client', []);  app.config(function ($httpProvider) {   //uncommenting the following line makes GET requests fail as well   //$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';   delete $httpProvider.defaults.headers.common['X-Requested-With']; });  app.controller('MainCtrl', function($scope, $http) {   var baseUrl = 'http://localhost:8080/server.php'    $scope.response = 'Response goes here';    $scope.sendRequest = function() {     $http({       method: 'GET',       url: baseUrl + '/get'     }).then(function successCallback(response) {       $scope.response = response.data.response;     }, function errorCallback(response) { });   };    $scope.sendPost = function() {     $http.post(baseUrl + '/post', {post: 'data from client', withCredentials: true })     .success(function(data, status, headers, config) {       console.log(status);     })     .error(function(data, status, headers, config) {       console.log('FAILED');     });   } }); 

The SlimPHP server:

<?php     require 'vendor/autoload.php';      $app = new \Slim\Slim();     $app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');     $app->response()->headers->set('Content-Type', 'application/json');     $app->response()->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');     $app->response()->headers->set('Access-Control-Allow-Origin', '*');      $array = ["response" => "Hello World!"];      $app->get('/get', function() use($array) {         $app = \Slim\Slim::getInstance();          $app->response->setStatus(200);         echo json_encode($array);     });       $app->post('/post', function() {         $app = \Slim\Slim::getInstance();          $allPostVars = $app->request->post();         $dataFromClient = $allPostVars['post'];         $app->response->setStatus(200);         echo json_encode($dataFromClient);     });      $app->run(); 

I have enabled CORS, and GET requests work. The html updates with the JSON content sent by the server. However I get a

XMLHttpRequest cannot load http://localhost:8080/server.php/post. Response for preflight has invalid HTTP status code 404

Everytime I try to use POST. Why?

EDIT: The req/res as requested by Pointy

Answer 1

EDIT:

It's been years, but I feel obliged to comment on this further. Now I actually am a developer. Requests to your back-end are usually authenticated with a token which your frameworks will pick up and handle; and this is what was missing. I'm actually not sure how this solution worked at all.

ORIGINAL:

Ok so here's how I figured this out. It all has to do with CORS policy. Before the POST request, Chrome was doing a preflight OPTIONS request, which should be handled and acknowledged by the server prior to the actual request. Now this is really not what I wanted for such a simple server. Hence, resetting the headers client side prevents the preflight:

app.config(function ($httpProvider) {   $httpProvider.defaults.headers.common = {};   $httpProvider.defaults.headers.post = {};   $httpProvider.defaults.headers.put = {};   $httpProvider.defaults.headers.patch = {}; }); 

The browser will now send a POST directly. Hope this helps a lot of folks out there... My real problem was not understanding CORS enough.

Link to a great explanation: http://www.html5rocks.com/en/tutorials/cors/

Kudos to this answer for showing me the way.