Angular 4: HTTP doesn't sent POST data

Question

I trying to make a Web Application and I want to test the HTTP functions, but I have a problem.

For example: I have this:

import { Injectable } from '@angular/core';

import { Headers, RequestOptions, Http } from '@angular/http';

import {Observable} from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class UserService {

    constructor(private http: Http) { }

    create(data: Object): Observable<any> {

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

        return this.http.post('http://localhost:8000/api/signin', {headers:headers}).map((res) => { res.json(); alert('ma-ta'); }).catch((error:any) => Observable.throw(error.message));
    }    
}

The function is called, I verified, but the http.post doesn't work, I mean, it not sent the data to that link, in Console I have nothing at Network, and I receive this:

12:01:18.779 Object { _isScalar: false, source: Object, operator: Object } 1 main.bundle.js:444:9

It's a kinda empty, only things I don't need, like an error information or something. Can somebody help me ?

Wesley Coetzee · Accepted Answer · 2017-07-26 09:35:11Z

1

You are sending an empty post. You were setting the headers (which isn't needed) and not sending the data through with the post request. Please see below:

create(data: Object): Observable<any> {
  let url: string = 'http://localhost:8000/api/signin';    
  return this.http.post(url, data)
    .map((res: Response) => res.json())
    .catch((error:any) => Observable.throw(error.message));
}

also remember to import the following:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

answered Jul 26, 2017 at 9:35

Wesley Coetzee

4,8483 gold badges30 silver badges48 bronze badges

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

5 Comments

George Hulpoi Over a year ago

It's same, maybe I imported something wrong ? I use import { HttpModule } from '@angular/http';

Wesley Coetzee Over a year ago

is your API expecting content-type of application/json? Are you sure your data is coming through? Are you sure your API is expecting the same model as data?

George Hulpoi Over a year ago

The API it's in Laravel and expect Post data, whatever, I should see in Inspect Element -> Network the POST method

Wesley Coetzee Over a year ago

before the line return this.http.post(url, data) add a console.log(data) and make sure that it is correct

George Hulpoi Over a year ago

Object { name: "pula mea", email: "e mare", password: "foarte mare" }

Collectives™ on Stack Overflow

Angular 4: HTTP doesn't sent POST data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related