Angular 4: Unknown error after POST request to REST api on localhost

Question

The angular app is trying to post user data to a node.js rest api that is also running on localhost:8080. It is an HttpErrorResponse with status: 0 and StatusText: Unknown Error. The rest api has been proven functional via a curl request made to the localhost. Any help with this problem would be greatly appreciated!

The error is coming from the line with: " this.http.post('http://localhost:8080/users' "

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, Validators } from '@angular/forms';
    import { HttpClient } from '@angular/common/http';
    import { Headers } from '@angular/http';

    import { AuthService } from '../services/auth.service';
    import { Router } from '@angular/router';
    import { User } from '../models/user';

    import * as crypto from 'crypto-js';


    @Component({
      selector: 'app-sign-up-component',
      templateUrl: './sign-up.component.html',
      styleUrls: ['./sign-up.component.css']
    })
    export class SignUpComponent implements OnInit {
        signUpForm: FormGroup;
        username: FormControl;
        password: FormControl;
        email: FormControl;
        phonenumber: FormControl;

        user: User;
        constructor(private auth: AuthService, private http: HttpClient, private router: Router) {

}

ngOnInit() {
    this.createFormControls();
    this.createForm();
}

createFormControls() {
    this.username = new FormControl('', Validators.required);
    this.password = new FormControl('', [Validators.required, Validators.minLength(8)]);
    this.email = new FormControl('', [Validators.required, Validators.pattern("^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$")]);
    this.phonenumber = new FormControl('', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]);
}

createForm() {
    this.signUpForm = new FormGroup ({
        username: this.username,
        password: this.password,
        email: this.email,
        phonenumber: this.phonenumber
    });
}

onSubmit() {
    if (this.signUpForm.valid) {
        // Create the new user
        this.user = new User(this.username, this.password, this.email, this.phonenumber);

        // Hash the password with SHA1
        var hashedPassword = crypto.SHA1(this.password.value);


    let headers = new Headers({'Content-Type' : 'application/json'});
        // POST the user to the backend
        this.http.post('http://localhost:8080/users', {
            username: this.username.value,
            password: hashedPassword.toString(),
            email: this.email.value,
            phonenumber: this.phonenumber.value
        }, headers).subscribe(
            res => {
                console.log(res);
                // Redirect to the login page after you sign up
                //this.router.navigate(['login']);
            },
            err => {
                console.log("there was an error");
            console.log(err);
            }
          );
    }
}

}

P.S. · Accepted Answer · 2017-10-08 00:55:38Z

1

It's because Angular has it's own server-side (may be I picked up the wrong words), and all requests to API goes to this side by default, not to your node.js server. To solve this problem, you can use proxy. Create proxy.config.json file at the root of your project.

proxy.config.json:

{
  "/test-route": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

And to start your project, you have to start your server in first terminal, and in second you should start Angular using:

ng serve --proxy-config proxy.config.json --watch

And all your API calls will be redirected to http://localhost:8080 (in this case). Notice, that you need to keep both Angular and your server running.

answered Oct 8, 2017 at 0:55

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

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

1 Comment

P.S. Over a year ago

@buzzkilljack, great!

Collectives™ on Stack Overflow

Angular 4: Unknown error after POST request to REST api on localhost

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related