Javascript 角度5:HTTP post`飞行前的响应具有无效的HTTP状态代码400`

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

Chrome控制台错误 飞行前的响应具有无效的HTTP状态代码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);
    }

}

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

这在邮递员身上起了作用

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

---

尝试更改以下代码行：

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

到

---

看起来您的负载必须是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);
    }

}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，RequestOptions，Response，Headers}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
声明变量$：any
@可注射（）
导出类松弛服务{
提取数据（res:Response）{
让body=res.json（）；
返回体| |{}；
}
handleError（错误：响应|任意）{
console.error（error.message | | error）；
返回承诺。拒绝（error.message | | error）；
}
私有url:string=https://hooks.slack.com/services/xxx/xxx/xxx';
构造函数（私有http:http）{}
公共松弛（数据：任何）：可观察{
让body=$.param（数据）；
让标题：标题=新标题（）；
headers.append（'Content-Type'，'application/x-www-form-urlencoded'）；
let options=newrequestoptions（{headers:headers}）；
返回this.http.post（this.url、body、options）
.map（此.extractData）
.接住（这个.把手错误）；
}
}

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

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
@可注射（）
导出类松弛服务{
handleError（错误：响应|任意）{
console.error（error.message | | error）；
返回承诺。拒绝（error.message | | error）；
}
私有url:string=https://hooks.slack.com/services/xxx/xxx/xxx';
构造函数（私有http:HttpClient）{}
公共松弛（数据：任何）：可观察{
常量请求选项={
参数：新的HttpParams（）
};
//在此处添加所有有效负载
requestOptions.params.set（'foo'，'bar'）；
返回this.http.post（this.url，requestOptions{
标题：新的HttpHeaders（{'Content Type'：'application/x-www-form-urlencoded；charset=utf-8；'}）
})
.map（（res）=>res.json（））
.接住（这个.把手错误）；
}
}

对于我来说，API似乎缺少CORS配置（选项http方法）

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

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

---

有关

的更多信息，请查看slacks api文档，以了解进行调用需要哪些标题。@floor我对问题进行了编辑，以包含一个片段，说明现在正在运行的内容不会更改输出。这不起作用。。。没有任何变体可以使我避免飞行前的错误

响应具有无效的HTTP状态代码400

…我正在尝试从前端调用Slack。。。它适用于其他Web项目。这是一个角度HTTP模块任务。我一定很怀念怎么用它

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

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);
    }

}

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);
    }

}