How to Send Data with POST Request in Ionic to localhost

Ionic Framework ionic-v3
1

I am using JSON server in my application.

I am trying to post my data to localhost:3000.

home.ts

 var headers = new Headers();
          headers.append("Accept", 'application/json');
          headers.append('Content-Type', 'application/json' );
          let options = new RequestOptions({ headers: headers });

          this.http.post('localhost:3000', JSON.stringify(this.data), options).subscribe(
            data => {
              alert.setSubTitle("Ordered");
              alert.present();
            },
            error => {
              console.log(error);
          });

error:

Response {_body: “{}”, status: 404, ok: false, statusText: “Not Found”, headers: Headers, …}
headers:Headers {_headers: Map(4), _normalizedNames: Map(4)}
ok:false
status:404
statusText:“Not Found"
type:2
url:“http://localhost:3000/db”
_body:”{}"
proto:Body

How should I fix it?

2

localhost is whatever device the app is running on, so it’s generally not what you want to be using. Pick a real hostname or IP address. Incidentally, you have a lot of spurious code here: you don’t need custom headers, you don’t need a RequestOptions, you don’t need to manually stringify anything. Just pass an object and Angular will take care of all of that.

3

Remove all these unnecessary code, do a ifconfig(mac) or ipconfig(windows) take your network ip, connect device to the same wifi/network you are with the pc you are running the server and it will work :wink:

You will have something like:
http://192.168.4.26:3000/

4 
          this.http.post('http://192.168.XX.X:3000', JSON.stringify(this.data)).subscribe(
            data => {
              alert.setSubTitle("Ordered");
              alert.present();
            },
            error => {
              console.log(error);
          });

Still the same.

error:
Response {_body: “{}”, status: 404, ok: false, statusText: “Not Found”, headers: Headers, …}
headers
:
Headers {_headers: Map(4), _normalizedNames: Map(4)}
ok:false
status:404
statusText:“Not Found"
type:2
url:“http://192.168.XX.X:3000/”
_body:”{}"
proto:Body

5

you don’t have any route??? like http://192.168.XX.X:3000/api/login or something like that? I think that you getting a 404 because there’s no route for root /

6

I’ve tried url:“http://192.168.XX.X:3000/db” but still the same.

I am using json-server --watch db.json in WindowsPowerShell and ionic lab in node.js command prompt. Maybe that’s why?

7

for Post, use Content-Type : application/x-www-form-urlencoded

8

Still the same error.
Please see screenshot

err
err.png743Ă—766 41.5 KB

9

I guess I’ve tried everything and it’s still not working.

Maybe someone can help me with choosing some server to send my data :slight_smile:

10

Step 1: Add a GET endpoint to your server, just make it return a string or anything. Hit that from your regular browser and make sure it exists.
Step 2: Forget completely about Ionic and use POSTman to post data to your server. It’s a free app/chrome extension that lets you make http requests.
Step3: Try hitting that GET endpoint you added to your server within your Ionic app.

You could have any of a large number of different problems. Try those above steps and see if you can get any of them to work.

1 Like
11

Step 1: GET is working fine. I’ve tried it before using folder path and localhost as well.
Step 2: POSTman chrome extension. I’ve tried. Working without issues.
Step 3: Working.

12

Wow…if all of those work…I have no idea why your post wouldn’t work. It’s nothing to do with localhost vs your network IP because your get request worked, so that’s irrelevant. You clearly have a POST endpoint if postman was able to post to it and get a response back.

So…no idea. Compare the request and request headers that you have in POSTman with the request and request headers that are being sent in Ionic (use chrome network tab in debug window). Post images on here of what your successful request in postman looks like (including the headers) and do the same for your ionic app.

13

Any chance the cordova whitelist plugin is biting you? I think it causes things to 404 if it doesn’t like them.

14

It’s running in the browser now, as far as I can tell from their posts, so in theory that’s not it.