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

我有以下服务；无论我配置了多少，我都无法使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 = {};
});

我见过这样的答案，但没有帮助

这在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

最佳答案

看来您的有效载荷必须是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);
    }

}