Ionic 2 / Angular issue with http post to laravel api

Question

I am finding it difficult to send http post request to laravel api. GET method is just working fine but I get below error in google chrome console

Failed to load http://localhost:8000/api/user/auth: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

It is been 2 days since i am searching for solution. I found a post on ionic official blog here https://blog.ionicframework.com/handling-cors-issues-in-ionic/ but it doesn't seem to help.

Thanks

Here is my code

authUser(email, pass) {       
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let data = JSON.stringify(
      {
        "email": email,
        "password": pass
      }
    );
    this.http.post(this.API_URL+'user/auth', data, httpOptions).subscribe(data => {
      if(data['success']) {
        this.user = data['response'];
      } else {
        this.hasError = data['message'];
        console.log(this.hasError);
      }
    });
  }

enable CORS on your API server github.com/barryvdh/laravel-cors — Tiep Phan
– Tiep Phan, Commented Feb 18, 2018 at 5:34
Thanks @TiepPhan, but I already had cors middleware setup in laravel, and my GET request are working fine — Khan Sharukh
– Khan Sharukh, Commented Feb 18, 2018 at 5:40
according your error message above, your server doesn’t set up correctly to accept Origin localhost:8100. please verify your server to accept the Origin above. — Tiep Phan
– Tiep Phan, Commented Feb 18, 2018 at 6:11
Thanks @TiepPhan for the help, I will try your solution too. — Khan Sharukh
– Khan Sharukh, Commented Feb 18, 2018 at 7:42

Khan Sharukh · Accepted Answer · 2018-02-18 07:41:57Z

3

Well I found the solution I have changed Content-Type: application/json and the data body, below is the example

authUser(email, pass) {       
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded' //updated
      })
    };
    let data = "email="+email+"&password="+pass+""; //updated

    this.http.post(this.API_URL+'user/auth', data, httpOptions).subscribe(data => {
      if(data['success']) {
        this.user = data['response'];
        console.log(this.user);
      } else {
        this.hasError = data['message'];
        console.log(this.hasError);
      }
    });
  }

answered Feb 18, 2018 at 7:41

Khan Sharukh

1,2011 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

saber tabatabaee yazdi Over a year ago

you save my day. thanks. when i google for how to call a post method in laravel by ionic3 i found nothing . my content type json and cors error kill me. but you survive me thanks

saber tabatabaee yazdi Over a year ago

what about when if i use bearer token and want to add Authorization to this andthen i have CORS error

saber tabatabaee yazdi Over a year ago

@KhanSahrukh yes of course this is here stackoverflow.com/q/56157129/308578

Collectives™ on Stack Overflow

Ionic 2 / Angular issue with http post to laravel api

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related