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屋!