Angular 5：HTTP 发布“预检响应具有无效的 HTTP 状态代码 400。”

Question

我有以下服务；无论我如何配置它，我都无法让 http 请求正常工作。

Chrome 控制台错误 Response for preflight has invalid HTTP status code 400.

我的服务

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';



@Injectable()
export class SlackService {
    extractData(res: Response) {
        let body = res.json();
        return body || {};
    }
    handleError (error: Response | any) {
        console.error(error.message || error);
        return Promise.reject(error.message || error);
    }

    private url: string = 'https://hooks.slack.com/services/xxx/xxx/xxx';

    constructor(private http: Http) {}

    public slack(data: any): Observable<{}> {
        let body = JSON.stringify(data);
        let headers: Headers = new Headers();
        headers.append('Content-Type', 'application/json');

        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.url, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

}

我记得在 AngularJS 中遇到过这个问题，下面修复了它... angular 2+ 中的等价物是什么？

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}); 

我见过Angular 2 Token: Response for preflight has invalid HTTP status code 400 这样的答案，但没有帮助

这在 PostMan 中有效

curl -X POST \
  https://hooks.slack.com/services/xx/xx/xx \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d payload=%7B%0A%20%20%20%20%20%20%22channel%22%3A%20%22%23general%22%2C%0A%20%20%20%20%20%20%22username%22%3A%20%22webhookbot%22%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22This%20is%20posted%20to%20%23general%20and%20comes%20from%20a%20bot%20named%20webhookbot.%22%2C%0A%20%20%20%20%20%20%22icon_emoji%22%3A%20%22%3Aghost%3A%22%0A%20%20%20%7D

Answer 1

看来你的payload必须是param而不是json 试试这个，如果你有 jQuery

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
declare var $: any


@Injectable()
export class SlackService {
    extractData(res: Response) {
        let body = res.json();
        return body || {};
    }
    handleError (error: Response | any) {
        console.error(error.message || error);
        return Promise.reject(error.message || error);
    }

    private url: string = 'https://hooks.slack.com/services/xxx/xxx/xxx';

    constructor(private http: Http) {}

    public slack(data: any): Observable<{}> {
        let body = $.param(data);
        let headers: Headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.url, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

}

或者尽快尝试新的 HttpClient 旧的 htpp 库将被弃用，请参阅here

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';



@Injectable()
export class SlackService {

    handleError (error: Response | any) {
        console.error(error.message || error);
        return Promise.reject(error.message || error);
    }

    private url: string = 'https://hooks.slack.com/services/xxx/xxx/xxx';

    constructor(private http: HttpClient) {}

    public slack(data: any): Observable<{}> {
        const requestOptions = {
            params: new HttpParams()
        };
        //Add all your payload here
        requestOptions.params.set('foo', 'bar');


        return this.http.post(this.url, requestOptions , {
            headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' })
        })
       .map((res) => res.json())
       .catch(this.handleError);
    }

}

Answer 2

对我来说，API 似乎缺少 CORS 配置（OPTIONS http 方法）。

如果来源不同，现代网络浏览器会首先请求 OPTIONS（飞行前）。

基本上，您需要做的是在后端配置 CORS - 前端与它无关。

更多关于CORS

Answer 3

尝试更改以下代码行：

headers.append('Content-Type', 'application/json');

到

headers.set('Content-Type', 'application/x-www-form-urlencoded');