Issue with http.post()

Ionic Framework ionic-v3
1

I’m trying to make a request on my ionic app to my server. I enabled cors on the server. When on ionic serve --lab: I make my request, it doesn’t work. The GET requests work, but the POST does not.

  register(username: string, email: string, password: string) {
    var header = new Headers();
    header.append("Accept", "application/json");
    header.append("Content-Type", "application/json" );
    let options = new RequestOptions({ headers: header });

    var body = {
      name: username,
      email: email,
      password: password
    };

    var senderBody = JSON.stringify(body);

    console.log(body, senderBody)
    return new Promise((resolve, reject) => {
      this.http.post("http://54.233.195.52:8080/user_parent", senderBody, options)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data)
        }, error => {
          console.log(error)
          reject(error)
        });
    });
  }

And i have cors on my server…

func SetDBtoContext(db *gorm.DB) gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Origin")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")

        c.Set("DB", db)
        c.Next()
    }
}

And these are the console.log answers:

OPTIONS http://54.233.195.52:8080/user_parent 404 (Not Found)

Failed to load http://54.233.195.52:8080/user_parent: Response for preflight has invalid HTTP status code 404

37 AM
37 AM954×444 62.2 KB

Am I missing something?

2

Are you using the Angular HttpClientModule?

3

I think so, my imports are

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Headers } from '@angular/http';
import { RequestOptions } from '@angular/http';

My constructor is

constructor(public http: Http) {
    console.log('Hello AuthenticationProvider Provider');
}

So i make requests like:

return new Promise((resolve, reject) => {
      this.http.post("http://54.233.195.52:8080/user_parent", body, options)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data)
        }, error => {
          console.log(error)
          reject(error)
        });
    });
4

https://angular.io/guide/http

5

You could get 404 response error.

Can you access http://54.233.195.52:8080/user_parent by browser? I think this is not Ionic & Angular error.

6

I tried using it, but it did not work, same thing with the Http I was having. I found out that it does work with urlencoded, jsons seems to be the issue

7

It’s the destination of a post request, weird thing is that it works in my native ios app…

8

So I found out what happened for anyone who has this sort of problem.
I had to Create a response to the request of method OPTION also which has in it’s headers the allow headers method. Something like this

v1.OPTIONS("/users", OptionsUser)      // POST
v1.OPTIONS("/users/:id", OptionsUser)  // PUT, DELETE

func OptionsUser(c *gin.Context) {
    c.Writer.Header().Set("Access-Control-Allow-Methods", "DELETE,POST, PUT")
    c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    c.Next()
}

extracted from: https://medium.com/@etiennerouzeaud/how-to-create-a-basic-restful-api-in-go-c8e032ba3181

Thing is: angular and ionic http basic method create a preflight of type OPTION before sending POST. I just had to handle it…

1 Like
9

I have the same problem but I am using .Net C # you think you could help me
Tengo el mismo problema pero estoy usando .Net C# crees que podrías ayudarme

10

If your problem is preflight you should be fine using a basic cors service. Idk what server technology you are using but there’s a chance it foes not automatically configure OPTIONS type request gor your cors, so you’d have to configure those manually.

if you share your code I can try to help

11

hi, i have the same issue. did you can solve it?