Super Starter Http Post 501 Not Implemented

#1

I am using Ionic Super Starter and I am trying http post to server. When i click the signup button I am getting an error.
What can I do to fix this problem?

Http failure response for http://domain.com/v1/signup.php: 501 Not Implemented

// Default ionic account information | src\pages\signup

  account: { name: string, email: string, password: string } = {
    name: 'Test Human',
    email: 'test@example.com',
    password: 'test'
  };
// src\pages\signup
doSignup() {
    // Attempt to login in through our User service
    this.user.signup(this.account).subscribe((resp) => {
      this.navCtrl.push(MainPage);
    }, (err) => {

      this.navCtrl.push(MainPage);

      // unable to sign up
      let toast = this.toastCtrl.create({
        message: this.signupErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }
// src\pages\signup
signup(accountInfo: any) {
    let seq = this.api.post('signup.php', accountInfo).share();

    seq.subscribe((res: any) => {
      // If the API returned a successful response, mark the user as logged in
      if (res.success) {
        this._loggedIn(res);
      }
    }, err => {
      console.error('ERROR', err);
    });

    return seq;
  }
// src\providers\api
post(endpoint: string, body: any, reqOpts?: any) {
    return this.http.post(this.url + '/' + endpoint, JSON.stringify(body), reqOpts);
  }
//My Api
<?php

    $response = array();        
    if (isset($_POST['name']) &&
    isset($_POST['email']) &&
    isset($_POST['password'])) {

    $name        = $_POST['name'];
    $email       = $_POST['email'];
    $password       = $_POST['password'];

    $response["success"]   = true; 
    $response["message"]  = "Success"; 
    echo json_encode($response);
}
else{
    $response["success"] = false;
    $response["message"] = "Failed";
    
    echo json_encode($response);
}
?>


#2

Please check in console if you have some error like cross

1 Like
#3

@avishai_peretz_dev I forgot to upload the screenshots. I updated the post. I’m very happy to review it again.

#4

add this to your php script on top of file

<?php
header("Access-Control-Allow-Origin: *");
#5

@avishai_peretz_dev I added

header("Access-Control-Allow-Origin: *");

but it gives the same error :slightly_frowning_face:

#6

Are you using an .htaccess file for anything?

#7

No I do not use. But this is not my first http post processing and I could use this API without using htaccess file before.

#8

so only this service api are throw 501?

#9

Exactly so.
I could use the following codes seamlessly with the similar API above. But the Ionic Super Starter Apis is failing.
So the API I use is the same.

let headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
});

let options = new RequestOptions({
    headers: headers
}); 
this.Url = "http://domain.com/api.php";
let body = 'Token=' + Token +
    '&ID=' + this.ID); 

this.http.post(this.Url, body, options)
    .map(res => res.json())
    .subscribe(data => {

    if (data.status) {
        console.log(data);
    }
    else {
        console.log(data.message);
    }
    }, error => {
    console.log(error);

});

#10

I don’t familiar with the Ionic Super Starter Apis so i don’t know them code of http service.
Why you don’t create your own api provider with post/get methods and use it with the above code you sent with your last reply.

#11

You’re right, but I do not want to rearrange the same codes in every ionic project. If the Ionic team wrote these codes, I think I should be able to use them. Any new project that would otherwise be very troublesome. Am I right?

#12

I am using Ionic 2/3 a year already and i have the basic app the one of the basic includes is the api provider that wrote by myself.
Doesn’t know any reason to use ionic super starter api and what are the plus of this.

Last thing that i suggest you to try fix this is to send the reqOpts parameter to post method from signup method

signup(accountInfo: any) {
  let headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  let options = new RequestOptions({
    headers: headers
  }); 

    let seq = this.api.post('signup.php', accountInfo, options).share();

    seq.subscribe((res: any) => {
      // If the API returned a successful response, mark the user as logged in
      if (res.success) {
        this._loggedIn(res);
      }
    }, err => {
      console.error('ERROR', err);
    });

    return seq;
  }
#13

I import

import { RequestOptions } from '@angular/http'; 

and added

let headers = new Headers({
   'Content-Type': 'application/x-www-form-urlencoded'
});
  
let options = new RequestOptions({
  headers: headers
});

Error3

#14
let headers = new Headers({
   'Content-Type': 'application/x-www-form-urlencoded'
});
  
let options = new RequestOptions({
  headers: headers
});

Change to

let headers = {
   'Content-Type': 'application/x-www-form-urlencoded'
};
  
let options = {
  headers: headers
};
1 Like
#15

Your error has nothing to do with Ionic, but your PHP code tells your app that it doesn’t know how to respond to the request it receives: POST to … not supported.

#16

Thank you very much @avishai_peretz_dev bro. You saved my days! :slightly_smiling_face:

1 Like
#17

This is an ionic error not Php.

So i added in user provider @avishai_peretz_dev 's suggested code.
Working successfully. :slight_smile:

let headers = {
   'Content-Type': 'application/x-www-form-urlencoded'
};
  
let options = {
  headers: headers
};
1 Like
#18

You virtually never need to manually set Content-Type, and doing so exposes you to the possibility for silly bugs when you inadvertently lie about it. What you should do instead is pay careful attention to your payload (accountInfo in this case). Make it an ordinary Object and the Content-Type will automatically be application/json. Make it an instance of HttpParams, and the Content-Type will automatically become application/x-www-form-urlencoded (as is wanted in this case).

1 Like