$http.delete() via AngularJS to Laravel backend API results in 405 (Method Not Allowed)

Question

I'm creating an Recipe application with an AngularJS frontend, and a Laravel backend (setup as an API). When I'm looking at a detailed view of an recipe, I want the user to have the possibility to delete the recipe. Therefore I've added this button:

<button class="btn btn-danger" ng-show="recipeData.id" ng-click="deleteRecipe(recipeData.id)">
  Delete
</button>

..which calls for this function:

$scope.deleteRecipe = function(id) {
    Recipes.destroy(id)
      .success(function() {
        $location.path('/');
      })
  }

..that uses this service/factory:

destroy : function(id) {
      return $http.delete('/api/recipes/' + id);
    }

..which should be routed according to these rules Laravel routing rules:

Route::group(array('prefix' => 'api'), function() {
  Route::resource('recipes', 'RecipeController');
  Route::resource('ingredients', 'IngredientController');
  Route::resource('nutrients', 'NutrientController');
  Route::resource('IngredientsByRecipe', 'IngredientsByRecipeController');
});

..and in our RecipeController we find this function which should take care of the finishing job:

  public function destroy($id)
  {
    Recipe::destroy($id);
    return Response::json(array('success' => true));
  }

..but somehow I can't get this to work because I get this error message in my browsers console:

DELETE http://localhost:8000/api/recipes/4 405 (Method Not Allowed)

..when I run this command below however, via the terminal, I recieve no errors and the specific recipe is deleted without problems.

curl -v -X DELETE http://localhost:8000/api/recipes/4

This problem only occurs while I'm running CodeKits browser-auto-refresh-tool. Can't figure out why. Posting the two headers below to see if you notice anything strange. With CodeKit:

DELETE /api/recipes/8 HTTP/1.1
Host: marcuss-macbook-air.local:5757
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://marcuss-macbook-air.local:5757
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://marcuss-macbook-air.local:5757/edit/8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,sv;q=0.6
Cookie: __ngDebug=true; ckrp_ypos=0_0; laravel_session=eyJpdiI6IjFiVWRNSkZhK3hualwvS1FCd29SMk1vaVhJN0Q4Q1RJS1k2TDFnUHBQTWFzPSIsInZhbHVlIjoiOUtRUUFRbUJlaDcyZHJIZE1oQnphUm1wTlZiYmZoQ1VKZXdTWngwM1hLV2s3VjlrSzZ1b3E2Q0dsK1wvRk1mZlNHaG1wcWxBcjc5V2QzOVpSOXpHRElRPT0iLCJtYWMiOiJkNjliMDZjMThjYmVjZDZhZjU2N2ZmMzkwYTUzMjBmYmVlZDc4ZWVlZmFlOWY1YzE5NWYwZDIxNDkwNGU5YmRiIn0%3D

Without CodeKit:

DELETE /api/recipes/7 HTTP/1.1
Host: localhost:8000
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:8000/edit/7
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,sv;q=0.6
Cookie: __ngDebug=true; laravel_session=eyJpdiI6Ik5iVWpESEYyRk45Yys5REV1OUdOcHlyTXd6YkNsSFlETTFlUkVhNjdseE09IiwidmFsdWUiOiJVRlFka1hERTBmMGJQb3dBQ2YyQmIzZnNGb2hab1VldmFhUUhHeE00czdqUytmVUdXQXRDbXJPc0lTRUpGZDY2K0V3alNHejRIY0JsdkNxQ1ExdlJoZz09IiwibWFjIjoiNzQ2YzIyODRkZjQ0ZTdjODI0YzYxMTVjMzc0ZTJhM2UzZmQyM2Y4OGIwYmJkMzU2ZWNiNzU1NzgzYzBkZDY0ZSJ9

What is the cause for my DELETE-requests to get 405'ed via Angular (using CodeKit) but not via my curl-request in the terminal or normal use of Angular?

Thanks in advance!

Answer 1

CodeKit does not support the DELETE method. So this is the reason why it works with other clients.

There is an open issue for this on GitHub: #398