Search code examples
expressangularangular2-formsangular2-services

HTTP post working on postman but not on Angular 2

I have a template which (click) triggets addUseCase():

import {Component} from "@angular/core";
import {DataService} from "../shared/data.service";
import {Config} from "../shared/strings";
import {Headers, Http} from "@angular/http";

@Component({
    selector: "add",
    styleUrls: ["add.component.scss"],
    templateUrl: "add.component.html"
})
export class AddComponent {
    public title: string;
    public body: string;

    constructor(private dataService: DataService,
                private http: Http) {
        this.title = "";
        this.body = "";
    }

    public addUseCase() {

        let url = Config.baseUrl + Config.case;
        console.log("url", url); // --> http://localhost:3001/case

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

        let body = JSON.stringify({title:this.title})

    this.http.post(url, body, {headers: headers}).map( res => console.log ("res", res), error => console.log("error", error));
    }
}

After testing in Postman I get my node/express server correct response. But when I try to use angular HTTP to send I don't get any response at all, no error:

My postman works, but can't make http post of angular 2 work:

enter image description here

Update with errors:

this.http.post(url, body, {headers: headers})
    .map(res => res.json()).subscribe(data => console.log(data)); //...errors if any
;

And the errors:

EXCEPTION: Unexpected token W in JSON at position 0ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
core.umd.js:3468 SyntaxError: Unexpected token W in JSON at position 0
    at JSON.parse (<anonymous>)
    at Function.Json.parse (http://localhost:3000/vendor.bundle.js:11272:59)
    at Response.Body.json (http://localhost:3000/vendor.bundle.js:12250:30)
    at MapSubscriber.project (http://localhost:3000/main.bundle.js:6202:47)
    at MapSubscriber._next (http://localhost:3000/vendor.bundle.js:23914:36)
    at MapSubscriber.Subscriber.next (http://localhost:3000/vendor.bundle.js:249:19)
    at XMLHttpRequest.onLoad (http://localhost:3000/vendor.bundle.js:12581:43)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14882:36)
    at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:6930:42)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14881:41)
  -------------   Elapsed: 16 ms; At: Thu Oct 27 2016 08:06:32 GMT-0500 (COT)   -------------  
    at Object.onScheduleTask (http://localhost:3000/polyfills.bundle.js:14537:19)
    at ZoneDelegate.scheduleTask (http://localhost:3000/polyfills.bundle.js:14859:50)
    at Zone.scheduleEventTask (http://localhost:3000/polyfills.bundle.js:14791:40)
    at zoneAwareAddListener (http://localhost:3000/polyfills.bundle.js:15441:15)
    at XMLHttpRequest.addEventListener (eval at createNamedFn (http://localhost:3000/polyfills.bundle.js:15544:18), <anonymous>:3:43)
    at Observable._subscribe (http://localhost:3000/vendor.bundle.js:12624:23)
    at Observable.subscribe (http://localhost:3000/vendor.bundle.js:70:28)
    at Observable._subscribe (http://localhost:3000/vendor.bundle.js:128:29)ErrorHandler.handleError @ core.umd.js:3468next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
http.umd.js:188 Uncaught SyntaxError: Unexpected token W in JSON at position 0(…)Json.parse @ http.umd.js:188Body.json @ http.umd.js:1166(anonymous function) @ add.component.ts:34MapSubscriber._next @ map.js:77Subscriber.next @ Subscriber.js:89onLoad @ http.umd.js:1497ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154ZoneTask.invoke @ zone.js:335
Solution

  • You never subscribed to the Observable. No request will be made until you do so

    this.http.post(url, body, {headers: headers})
  .map(res => res.text()).subscribe(data => console.log(data));