使用 Angular 2 向 API 发出 POST 请求时出错

Question

我正在尝试在我的 Angular 2 应用程序中发出发布请求。我收到一个错误。我启用了 CORS 插件，当我使用 Postman 时，请求成功，所以不知道可能出了什么问题。我会很感激任何帮助:)

Failed to load resource: the server responded with a status of 404 (Not Found)
16:1 XMLHttpRequest cannot load https://website/api/v1/auth/sign_in. Response for preflight has invalid HTTP status code 404

服务.ts

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";
import {User} from "./auth.model";

@Injectable()
export class AuthService{
    constructor(private http: Http){
    }

    signUp(user:User){
        const body= JSON.stringify(user);
        const headers= new Headers ({'Content-type':'application/json'});
        return this.http.post('https://website/api/v1/auth', body,{headers:headers})
            .map((response:Response)=> response.json())
            .catch((error: Response)=>Observable.throw(error.json()));
    }

    signIn(user:User){
        const body= JSON.stringify(user);
        const headers= new Headers ({'Content-type':'application/json'});
        return this.http.post('https://website/api/v1/auth/sign_in', body,{headers:headers})
            .map((response:Response)=>response.json())
            .catch((error: Response)=>Observable.throw(error.json()));
    }


}

signin.ts

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormControl, Validators,FormsModule} from '@angular/forms';
import {AuthService} from './auth.service';
import {User} from "./auth.model";

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
  myForm: FormGroup;

  constructor(private authService: AuthService) { }


  onSubmit(){
    const user= new User(this.myForm.value.email, this.myForm.value.password);
    this.authService.signIn(user).subscribe();
    console.log("c");
  }

  ngOnInit() {
    this.myForm= new FormGroup({
      email: new FormControl(null, [Validators.required,
        Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
      ]),
      password: new FormControl(null, [Validators.required])
    });
  }

}

Answer 1

我相信传递给http.post 方法的第三个参数是RequestOptions object

   const headers= new Headers ({'Content-type':'application/json'});
   const options = new RequestOptions({ headers });
   this.http.post('https://website/api/v1/auth', user, options)

此外，您不需要在发送对象之前对其进行字符串化，只需将用户对象作为正文发送

您还应该检查以确保服务器在标头中返回 Access-Control-Allow-Origin