Angular 4:POST请求到本地主机上的REST API后发生未知错误

angular度应用程序试图将用户数据发布到同样在localhost:8080上运行的node.js rest api。 这是一个HttpErrorResponse状态:0和StatusText:未知的错误。 其余的api已经被certificate是通过对本地主机的curl请求来实现的。 任何帮助这个问题将不胜感激!

错误来自行:“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-]+)*(\.[az]{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); } ); } } 

}

这是因为Angular有它自己的服务器端(可能是我拿错了的话),并且所有对API的请求默认都会转到这一边,而不是你的node.js服务器。 为了解决这个问题,你可以使用proxy 。 在项目的根目录下创buildproxy.config.json文件。

proxy.config.json:

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

而要开始你的项目,你必须在第一个terminal启动你的服务器,然后你应该启动Angular:

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

所有的API调用将被redirect到http://localhost:8080 (在这种情况下)。 注意,你需要保持Angular和你的服务器运行。