How to use the http post method on ionic 2 and Angular 2?

Question

I am now creating the Ionic 2 app to register and authenticate to Stormpath. When I registered the user I used the http post method. Following function is in provider there.

register(username: string, email: string, password: string, givenname: string, surname: string){
    var headers = new Headers();
    headers.append('content-type', 'application/json;charset=UTF-8');
    headers.append('Access-Control-Allow-Origin','*');
    let options= new RequestOptions({headers: headers});
  
    var url = 'https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts';

    var data = JSON.stringify({
      surname: surname,
      username: username,
      givenName: givenname,
      email: email,
      password: password
    });

    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{
      console.log(data)
    }, err=>{
      console.log("Error!:", err.json());
    });
 }

And using this function code is as following.

signup(form){

    console.log('Pressed Signup button.')

    let username = form.value.username,
      email = form.value.email,
      password = form.value.password,
      givenName = form.value.givenName,
      surname = form.value.surname;

    this.stormpathService.register(username, email, password, givenName, surname);

    this.navCtrl.pop();
  }

The HTML file is :

<ion-content padding>
  <form #signupForm="ngForm" (ngSubmit)="signup(signupForm)">
    <ion-list style="margin-bottom: 25%;">
      <ion-item>
        <ion-label floating>GivenName</ion-label>
        <ion-input [(ngModel)]="givenName" name="givenName" type="text" required=""></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>SurName</ion-label>
        <ion-input [(ngModel)]="surname" name="surname" type="text" required=""></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input [(ngModel)]="username" name="username" type="text" required=""></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Email</ion-label>
        <ion-input [(ngModel)]="email" name="email" type="text" ></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input [(ngModel)]="password" name="password" type="password" required=""></ion-input>
      </ion-item>
    </ion-list>

    <div style="margin-bottom: 8%;">
      <button ion-button type="submit" color="light" full > Sign up </button>
    </div>

  </form>
</ion-content>

Error screen is :

Why I don't get response from stormpath server?

the `url` doesn't support cross origin requests, you should check if stormpath has an api which support CORS — Ivar Reukers, Dec 05 '16 at 12:02
Also an addition ; Set your headers within your components' constructor. Headers can be set once during the lifecycle of your application. — JoeriShoeby, Dec 05 '16 at 17:20
it`s because the CORS, try doing a build, in the device doesnt happen the CORS exeptions, also for develpment you can use this extension in Chrome [Allow-Control-Allow-Origin: *](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi) — JoxieMedina, Dec 05 '16 at 21:25

score 0 · Answer 1 · edited Nov 13 '17 at 04:26

Can you try to transform your http request and add your headers?

$http.post('yoururl', {
    foo: 'bar'
    }, {
    transformRequest: {
        body: function(data, headersGetter) {
        return myTransformFn(data);
    },
    headers: function(data, headersGetter) {
        var headers = headersGetter();
        headers['Content-Type'] = 'x-www-form-urlencoded';
        return headers;
    }
  }
});

score 0 · Answer 2 · answered Aug 22 '17 at 04:50

0

I had the same issue , go to chrome extensions and search for the plugin CORS and add the best plugin you like ,then enable the plugin it will work

answered Aug 22 '17 at 04:50

Ameen Maheen

2,719
1
28
28

score 0 · Answer 3 · answered Nov 13 '17 at 04:38

In the Ionic latest versions if you are using ionic serve commnad then you must have to use Proxies to prevent Preflight and CORS Issues,

First add API path and URL in ionic.config.json file like

{
  "name": "APP-NAME",
  "app_id": "",
  "proxies": [
    {
      "path": "/accounts",
      "proxyUrl": "https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts"
    }
  ]
}

Now, while calling your API from http use the /accounts URL instead of the https://api.stormpath.com/v1... like,

....
    var url = '/accounts'; // use the Proxy Path here instead of Stormpath API URL

    var data = JSON.stringify({
      surname: surname,
      username: username,
      givenName: givenname,
      email: email,
      password: password
    });

    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{
      console.log(data)
    }, err=>{
      console.log("Error!:", err.json());
    });
....

After making the above changes you must rerun command ionic serve.

Still, if you are getting issues then refer Handling CORS Issues In Ionic

How to use the http post method on ionic 2 and Angular 2?

3 Answers3