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和你的服务器运行。
- “angular-bootstrap-md \ index.ts不是编译输出的一部分”
- Angular 2 / webpack“未捕获的ReferenceError:require没有定义”
- 更好的方法一对一和群聊nodejs Socket.io
- Angular2 beta 15 npm启动错误
- “ng2-CKEditor”节点模块不能使用打印机
- Angular2 / Electron应用程序组件找不到模板HTML文件
- 如何在执行完所有testing用例之后closures浏览器,或者使用带有angularjs的selenium服务器的量angular器testing用例失败之后
- 每次如何引用本地安装的Angular2 bundle而不是“npm install”?
- 使用Http Post的Typescript&Angular问题新手