How to use ionic native HTTP to perform a post with body and header

Ionic Native
1

We are trying to use Ionic Native HTTP which use codrova-HTTP, to do a simple get works very well, something like that:

        this.http.get('https://blabla.blabla.com/login', {}, {})
                     .then((data) => {
                         console.log(data);
                     })
                     .catch((error) => {
                         console.log(error);
                     });

But we can not do a POST with data and Content-Type header set.

        let data = {
            'Action': 'Login',
            'UserName': 'bla',
            'Password': 'blabla'
        };
        let headers = {
            'Content-Type': 'application/json'
        };

        this.http.post('http://10.0.2.2:3000/cloudapi/login', data, headers)
                    .then((data) => {
                        console.log(data);
                    })
                    .catch((error) => {
                        console.log(error);
                    });

In this case the POST is send to node proxy but we log there header and body. But there is no body in the request and the header is not set with ā€˜application/jsonā€™.
We tried to do many things with data and header but nothing changed.

Can someone help for this probably simple problem?

2 Likes
2

Hi @JayWilsonJr, as I wrote on slack channel perhaps you can join the discussion here!
Thx

3

I found out the data has as Content-Type header set application/x-www-form-urlencoded; charset=UTF-8 so the passed data is something like that password=b&username=a and not a json.
For what I see we can not send JSON over native http. OMG

1 Like
4

I would think that you can send JSON, though I donā€™t know for sure. Have you seen this thread: Ionic native POST sending no data

5

Letā€™s start with the bascis:
What is your ionic info output?
Where are you testing? Device? Emulator? Browser?

Remote debug the request on the device instead of looking at the receiving server to see what the code actually sends:
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the network tab.

6

This is my ionic info

cli packages: (/abc/web-client-ionic/node_modules)
    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:
    Cordova CLI : 7.0.1 

local packages:
    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:
    Android SDK Tools : 26.0.2
    Node              : v6.11.1
    OS                : Linux 4.10
    npm               : 5.3.0

Iā€™m testing the scenario on Emulator ionic cordova emulate android and on device ionic cordova run android so it is like production mode.
In browser cordovaHTTP is not working, so we use simple angular http client with a combination of ionic a nodejs proxy, and this is working like a charm.
On our code we check if platform android or ios is enabled and if so, for our http post we use ionic-native/http instead of angularā€™s http, until here very simple, this is my code:

let data = {
            'Action': 'Login',
            'UserName': 'bla',
            'Password': 'blabla'
        };
        let headers = {
            'Content-Type': 'application/json'
        };

        this.http.post('http://blabla.com/cloudapi/login', data, headers)
                    .then((data) => {
                        console.log(data);
                    })
                    .catch((error) => {
                        console.log(error);
                    });

As described per documentation we have to pass not a json to http.post but a object, so we can not do JSON.stringify(data). So if we launch this code on emulator or device at the server we get a body like this


Action=Login&Password=blabla&UserName=bla

and not a json body!
We try to set the Content-Type header as application/json in many many ways but nothing works.
At server side we have always application/x-www-form-urlencoded; charset=UTF-8 as header.

As we can read in some posts and others, sending object as json in body is not support by plugin! :cry:

1 Like
7

What does that mean? Production mode is triggered by --prod.

Can you build a super simple repository on Github with just the relevant code for your issue so one can play with it?

8

I knew that this question comes :smile::smile:, for me also without --prod is a production mode, --prod does only a small bundle and many optimization.
With production mode I intend, If you run ionic emulate android without -lc you run the app in emulator and with WebView and Cordova functionallity. With --lc you rund the app in browser and donā€™t have ionic-native/http functionallity available.

Iā€™ll try to share a project in a few minutes! Thank you in the meantime

1 Like
9

Ok, so you mean a ā€œnative contextā€ or something like that. Reusing words that mean something else is always problematic :stuck_out_tongue:

10

I saw this two forked cordova plugins, https://github.com/silkimen/cordova-plugin-advanced-http and another fork of the first one https://github.com/LlamaloX/cordova-plugin-advanced-http-2.

Those plugins handle JSON post see setDataSerializer

urlencoded: send data as url encoded content in body (content type "application/x-www-form-urlencoded")
json: send data as JSON encoded content in body (content type "application/json")

and also other important things, like handle cookies

I installed this via ionic cordova plugin add cordova-plugin-advanced-http and removed before the default cordova-plugin-http. I also removed ionic-native/http and copied the index.ts file into my project for using the new plugin, so my local file is something like that

@Plugin({
    pluginName: 'HTTP',
    plugin: 'cordova-plugin-advanced-http',
    pluginRef: 'cordovaHTTP',
    repo: 'https://github.com/silkimen/cordova-plugin-advanced-http',
    platforms: ['Android', 'iOS']
})
@Injectable()
export class HTTP extends IonicNativePlugin {

But at the end in the emulator and on device I got this error:

Native: tried calling HTTP.post, but the HTTP plugin is not installed
Install the HTTP plugin: 'ionic cordova plugin add cordova-plugin-advanced-http'

But I had installed this before, so Iā€™m really not the expert on this things! :expressionless: Some ideas?
I think I would suggest also the ionic team to use this amazing plugin, there are many enhancements and this two plugins are more maintained then the original one.

11
  1. Create a new topic about this new plugin you are using please. Include all the necessary information.
  2. Use it directly, not via Ionic Native if it doesnā€™t really support it (Or is it similar enough to the original one?)
12

That is a great idea. Post an issue here: Issues Ā· danielsogl/awesome-cordova-plugins Ā· GitHub

13

Yea so me first great idea :smile: :smile: here the feature request, you can vote for it

1 Like
14

https://forum.ionicframework.com/t/use-cordova-plugin-advanced-http/101594

1 Like
15

Ionic Native now or better from a while is using this cordova plugin which works much better and is much better maintained!

THX GUYS

16

Just add this.http.setDataSerializer(ā€˜jsonā€™) before do the post

35 Likes
17

I think this wasnā€™t working as expected on old plugin. But anyway now using another plugin anything is fine

18

thank you it helped.

19

Thanks. You are really great.

20

Thanksssss. You saved my day. Its works fine.