Question

我正在努力为角度http POST请求添加多个标头。添加单个标头工作正常，但除此之外的任何内容都会导致错误请求。例如

Update(url): Observable<string> {

        let _headers = new Headers();
        _headers.append( 'accept','application/json;odata=verbose')
     
        let options = new RequestOptions({
            withCredentials: true,
            headers: _headers
        })
        let body = '"{ hey ... this is some data }"'
        return this.http.post(url, body, options)
            .map(data => { return data.json() })
    }

上面的代码正确生成请求。见下文（来自Fiddler）

POST http://foo.wingtip.com/pwa/_api/contextinfo/ HTTP/1.1
Host: foo.wingtip.com
Connection: keep-alive
Content-Length: 31
accept: application/json;odata=verbose
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
content-type: text/plain
Referer: http://localhost:4200/resPlans
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: Ribbon.Tabs.TeamBuilder.Home=1920974|-1|125

"{ hey ... this is some data }"

如果我使用.append添加另一个标头，生成的请求是错误的...我以前的标题也消失了......例如......

update(url): Observable<string> {

        let _headers = new Headers();
        _headers.append( 'accept','application/json;odata=verbose')
        _headers.append('Content-Length','31')  /////this breaks it
   
        let options = new RequestOptions({
            withCredentials: true,
            headers: _headers
        })
        let body = '"{ hey ... this is some data }"'
        return this.http.post(url, body, options)
            .map(data => { return data.json()})
    }

结果请求（在Fiddler中）看起来像是

OPTIONS http://foo.wingtip.com/pwa/_api/contextinfo/ HTTP/1.1
Host: foo.wingtip.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:4200/resPlans
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8

请注意，这两个自定义标头都不存在。

是的......我确实从Angular的Http库中导入了Http，Header和RequestOptions。

非常感谢指导

Answer 1

尝试添加一些TOKEN

_header.append('Authorization', 'Bearer ' + TOKEN_VALUE );

如果不起作用，请使用SOME_VALID_TOKEN ..

尝试以下完整代码

    const headers = new Headers({'Content-Type': 'application/json;charset=UTF-8'});
    headers.append('Authorization', 'Bearer ' +  SOME_VALID_TOKEN);
    this._currentHeader = new RequestOptions({headers: headers});

    http.post(path, data, this._currentHeader)

Answer 2

你可以尝试使用像这样的东西

 this.options = new RequestOptions({
    headers: new Headers({
      'header1': 'value1',
      // And more
    })
  });

并在请求中使用此选项

如果你正在使用新的HttpClientModule做类似的事情

const headers = new HttpHeaders()
    .set('header1', "header1")
    .set('header2', "header2");

Answer 3

我的问题是由于CORS。由于我的额外标题和http方法（POST），Angular HttpClient＆＃34; pre-flighted＆＃34;我的请求 - 使用OPTIONS请求方法将我的POST请求转换为请求。我最初假设请求已经以某种方式被破坏，而实际上它的行为正如它应该的那样。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

Angular Http POST - 添加多个标头

3 个答案: