CODEWITHSUNDEEP
javascriptangularjshttp-postionic-framework
njsokol
njsokol

Reputation: 119

Angular + Ionic Post request getting 404 not found

I have searched for the reason behind this error for the last couple hours unable to solve it. Hopefully someone has experienced the same issue and is able to help with a remedy.

I am using Ionic and Angular to create a simple application. I am running locally using Ionics ionic serve command to set up a simple server.

I have a simple index.html page that is as follows:

...
<body data-ng-controller="AppCtrl">
    <ion-header-bar class="bar-balanced">
        <h1 class="title ">Hello World!</h1>
    </ion-header-bar>
    <ion-content>
        <h1>Some Content</h1>
    </ion-content>
</body>
...

and an app.js file that has been iterated numerous times and tried various online tutorials to end up with:

var App = angular.module("App", ["ionic"]);

App.controller("AppCtrl", ["$scope", "$http" , AppCtrl]);

    function AppCtrl($scope, $http) {

        $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

        var request = $http({
            method: 'post',
            url: 'http://localhost:8100/php/login.php',
            data: { "cat" : "henry" },
            headers : {"Content-Type": 'application/x-www-form-urlencoded'}

        }).success(function (data, status, headers, config) {
            console.log(data);
        }).error(function (data, status, headers, config) {
            console.log("login.php failed");
        });
    };

My problem: is that I am getting "404 Not Found" error on my post requests. However, when I change to a get request, it seems to echo back the PHP file just fine. Its a simple echo "Hello World!" php file.

At this point, any helpful information would be greatly appreciated. Thank you!

Upvotes: 0

Views: 2900

Answers (1)

Douglas K.
Douglas K.

Reputation: 921

I got a similar issue and I this site helped me to understand my problem:
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

By default:

jQuery transmits data using Content-Type: x-www-form-urlencoded.
AngularJS transmits data using Content-Type: application/json.

Which unfortunately some Web server languages, notably PHP, do not unserialize natively.

My solution was:
In my .PHP I just did a JSON_DECODE in my content

$data = json_decode(file_get_contents('php://input'), true);

Upvotes: 1

Related Questions