飛行響應中的 Access-Control-Allow-Headers 不允許請求標頭字段 Content-Type

Question

我正在使用 Laravel（Restful API）開發 Angular 4 應用程序。 我已經用 Postman 測試了 API。 它工作正常，但是當我從 Angular 4 調用 API 時，出現此錯誤：

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { User } from '../models/user';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AuthService {
 private BASE_URL: string = 'http://localhost/fmfb_hr/public/api';
  private headers: Headers = new Headers({'Content-Type': 'application/json'});
 constructor(private http: Http) {}
login(user): Promise<any> {
let url: string = `${this.BASE_URL}/login`;
return this.http.post(url, user, {headers: this.headers}).toPromise();
}


}

Answer 1

將這三行添加到 CORSify 您的服務器。 如果您使用 Apache 作為 Web 服務器，請將這些行添加到您的.htaccess文件中：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Answer 2

試試這個代碼在一個請求中添加兩個標頭，我希望這有效

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { User } from '../models/user';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AuthService {
    private BASE_URL: string = 'http://localhost/fmfb_hr/public/api';
    private headers: Headers = new Headers({});
    constructor(private http: Http) {}
    login(user): Promise<any> {
        let url: string = `${this.BASE_URL}/login`;
        this.headers.append('Content-Type','application/x-www-form-urlencoded');
        this.headers.append('Content-Type','application/json');
        return this.http.post(url, user, {headers: this.headers}).toPromise();
    }
}