Ionic HTTP Requests


#1

As far as i know, the Angular class Http can be used for any HTTP Requests. If i want to GET any data, i just have to use following code.

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from "@angular/http";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public http: Http) {
    let url = 'http://some.url.com/';
    this.http.get(url)
      .subscribe(response => {
        console.log(response)
      }, xhr => {
        console.log(xhr);
      });
  }

}

Nearly the same for a POST Request:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from "@angular/http";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public http: Http) {
    let url = 'http://some.url.com/'
    this.http.post(url, {data: 'data'})
      .subscribe(response => {
        console.log(response)
      }, xhr => {
        console.log(xhr);
      });
  }

}

In both cases, there is an OPTIONS Pre-Flight Request. So my first question is: How can i disable the Pre-Flight OPTIONS Request? i really need to do that, so please do not just answer like: it is not possible or it this Request needs to be done…
The other thing is, when i send a PUT or a DELETE Request, PHP will not recognize it as PUT or DELETE. Why does PHP not recognize a Angular HTTP PUT or DELETE?
Please answer like you will talk to a complete noob. I need to explain it to my work collegues (and i need to convince the to use Ionic in combination with a RESTful PHP API)
Kind regards


#2

I can’t answer that as you excluded the correct answer as a valid response.

Does it actually do a PUT or DELETE request? See in your browser’s dev tools, network tab. If it does a DELETE or PUT request there, the problem is in your PHP backend.


#3

So there is absolutly no way to prevent such a OPTIONS Request?

No a can not see any PUT requests. (in DevTools @Network Tab)


#4

OPTIONS requests are par of CORS. CORS is a browser security feature. You can workaround it by for example doing the requests with a native plugin that is outside of the browser context.

What kind of request gets sent when you tell it to do a PUT?
Can browsers actually send PUT requests by themselves?


#5

Side note: Not an answer to your questions, but since it seems that you are at the very beginning of performing http requests with angular, if you are using the last Ionic or Angular version, I would advise to use httpClient instead http since it was introduced to replace it


#6

As far as i know should browsers be able to send PUT Requests see @stackoverflow.
The only thing i see is a OPTIONS Request. :face_with_raised_eyebrow:

I appreciate your advice and i am going to try it. :grinning:


#7

If needed, here a working example (from my app) of PUT request with httpClient

let headers: HttpHeaders = new HttpHeaders();
headers.append('Content-Type', 'application/json');

let body = {
    token: 'my_token',
    something: 'something_else'
};

this.httpClient.put('https://something.com/route/myid', body, {headers: headers})
     .subscribe((result: any) => {
          console.log(result);
     }, (errorResponse: HttpErrorResponse) => {
         console.error(errorResponse);
});