Angular 4:对本地主机上的REST API的POST请求后出现未知错误 [英] Angular 4: Unknown error after POST request to REST api on localhost

问题描述

Angular应用程序试图将用户数据发布到也在localhost:8080上运行的node.js rest api.它是一个HttpErrorResponse，状态为0，StatusText为未知错误.其余api已通过向本地主机发出的curl请求被证明可以正常工作.任何解决此问题的帮助将不胜感激！

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!

错误来自以下行:"this.http.post(' http://localhost:8080/用户'"

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);
            }
          );
    }
}

}

推荐答案

这是因为Angular拥有自己的服务器端(可能是我输入了错误的单词)，并且默认情况下，对API的所有请求都转到该端，而不是到您的node.js服务器.要解决此问题，可以使用 proxy .在项目的根目录下创建 proxy.config.json 文件.

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:

proxy.config.json:

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

要启动项目，必须在第一个终端中启动服务器，然后在第二个终端中，应使用以下命令启动Angular:

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

所有您的API调用将重定向到 http://localhost:8080 (在这种情况下).请注意，您需要同时保持Angular和服务器运行.

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.

这篇关于Angular 4:对本地主机上的REST API的POST请求后出现未知错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！