Ionic + Angular POST request return state 404

Question

I just updated on the new version on the Angular + Ionic and method for processing remote request stopped working and returns always 404 response.

Request is following:

Request Method:POST
Status Code:404 Not Found (from cache)
Request Headersview source
Accept:application/json, text/plain, */*
Content-Type:text/plain
Origin:file://
User-Agent:Mozilla/5.0 (Linux; Android 4.4.2; Lenovo Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36
Request Payloadview source
{,…}

Code of the method which is processing remote request is following:

    // set transfer credentials
                $http({
                    method : 'POST',
                    url : $scope.remoteUrl,
                    data: {img_base64: "/9j/4AAQSkZ"},
                    headers: 'application/json',
                    timeout: 10000
                    // success response
                }).success(function(data, status, headers, config) {
                    //SUCESSS
                    } else {
                    //PROCESSING ERROR                     
}

                    // error response
                }).error(function(data, status, headers, config) {
                    // ERROR
                });

I tried to solve it using this topic:

AngularJs $http.post() does not send data

and

Angular + Ionic Post request getting 404 not found

But without luck.

Server side is processing request by this way:

$inputJSON = file_get_contents('php://input');
    $input= json_decode( $inputJSON, TRUE ); //convert JSON into array

If i'm trying to send request using Postman or Curl everything seems to be working.

Ionic info:

Node Version: v0.12.2
Cordova CLI: 5.0.0
Ionic CLI Version: 1.3.22
Xcode version: Xcode 6.3.1 Build version 6D1002 
ios-sim version: Not installed
ios-deploy version: Not installed

AngularJS version:

"version": "1.3.13",

How can i solve it please?

Many thanks for any advice

score 42 · Accepted Answer · edited Jun 20 '20 at 09:12

Hum, I just ran into the same problem: the header suggests it has been fetched from cache... But actually, it seems it has to do with a new security policy in new versions of Cordova.

Here's how I solved it:

I installed Cordova's whitelist plugin :

cordova plugin add cordova-plugin-whitelist

Then, add your content policy in your index.html as a meta tag (using your own host or '*' for accepting all requests) :

<meta http-equiv="Content-Security-Policy" content="default-src 'self' yourhost.com ws://localhost:35729 data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *;script-src 'self' localhost:35729 'unsafe-eval' 'unsafe-inline';">

default-src is used for general requests; the ws://localhost:35729 host is used for live-reload in ionic serve.

script-src is used for secure script execution

unsafe-inline and unsafe-eval are required in order for angular to work properly.

data: gap: https://ssl.gstatic.com is only used on iOS.

self means the current host of the index.html file.

You'll have to add your own in order for your requests to work. Don't forget to add the protocol and the port if they're non-standard

You can skip the meta tag if you don't want it, but you'll get a lot of warnings from the whitelist plugin.

More info on how to configure this in the plugin's readme.

Then rebuild your app, and it should work again.

Found this one out the hard way by building with a newer version of Phonegap Build. Was pulling out my hair wondering why the app was working fine on other devices but not on this one particular Android device... thank you. — ScottN, Oct 26 '15 at 22:51
Same probleme but this not working, reinstalling cordova-plugin-whitelist has solved the probleme you can also look https://forum.ionicframework.com/t/ionic-angular-http-post-results-in-a-404-but-only-on-an-android-phone-not-on-an-iphone-or-in-the-browser/28999/14 — HugoPoi, Sep 15 '16 at 13:16

score 8 · Answer 2 · answered Mar 11 '17 at 05:21

8

I also had this problem and searched a lot then finally... i removed the whitelist plugin:

cordova plugin remove cordova-plugin-whitelist

then renstalled it

cordova plugin add cordova-plugin-whitelist

It helped me and hope it solve your problem

answered Mar 11 '17 at 05:21

Vishnu Kumar Soni

269
3
6

score 2 · Answer 3 · answered Jul 19 '16 at 08:05

2

I struggled for quite some time with this, but the trick was to install the plugin, configure the CSP in index.html and then remove the plugin an adding it again.

answered Jul 19 '16 at 08:05

Wouter van Vegchel

469
8
19

score -2 · Answer 4 · answered May 08 '15 at 11:43

-2

The (from cache) in response status suggests that your browser cached bad reply and is playing it back to you. Try clearing cache or use any cache busting techniques.

answered May 08 '15 at 11:43

Nopik

542
1
4
15

Thanks, but that is strange because it is the fresh installation on the device. Which are you recommending to use for me? Should i add some headers on the server side? – redrom May 10 '15 at 17:47

Ionic + Angular POST request return state 404

4 Answers4

Linked