无法使用授权标头执行发布请求 [英] unable to execute post request with authorization header

问题描述

当我发布带有Authorization标头的请求API时，我在角度4中遇到了问题吗？

I have an issue in angular 4 when I post a request API with Authorization header?

addPost(body): Observable<any>{
      const url = 'https://xxxxxx';

     return this.http.post(URL, body, this.options)
     .map((res:Response) => {
     this.data = res.json();
     })
}

令牌来自firebase auth

token comes from firebase auth

afAuth.auth.currentUser.getIdToken()
    .then(token => {
        this.headers = new Headers({
            'Authorization': 'Bearer '+token
        });
        this.headers.append('Content-Type', 'application/json');
        this.options = new RequestOptions({ headers: this.headers });
    });
this.headers.append('Content-Type', 'application/json');
this.options = new RequestOptions({ headers: this.headers });

我打电话给这个

return this.getJob.addPost(body).subscribe((data) => {
    console.log(data);
});

回复403 !!!

请求网址： https://us-central1-xxxxxx-prod.cloudfunctions.net/ api / post
申请方法：选项

状态代码：403

远程地址：216.58.198.51：443

推荐人政策：no-referrer-when-downgrade

响应标头

access-control-allow-methods：GET，POST

access- control-allow-origin：

cache-control：private

content-encoding：gzip

content-length：32

content-type：text / html; charset = utf-8

日期：星期二，08八月2017 12:23:55 GMT

etag：W /c-dAuDFQrdjS3hezqxDTNgW7AOlYk

function-execution-id：d0la00v58w7p

服务器：谷歌前端

状态：403

变化：接受编码

x-cloud-trace-context：d1b6ff9d729f7e250193a70aea16cac1; o = 1

x-cloud-trace-context：d1b6ff9d729f7e250193a70aea16cac1

x-powered-by：Express

请求标题

：权限：us-central1-xxxxxx-prod.cloudfunctions.net

：方法：选项

：路径：/ api / post

：scheme：https

accept： / *

accept-encoding：gzip，deflate， br

accept-language：en-US，en; q = 0.8，ar; q = 0.6

access-control-request-headers：authorization，content-type

access-control-request-method：POST

alexatoolbar-alx_ns_ph：AlexaToolbar / alx-4.0.1

cache-control：no-cache

来源： http：// localhost：8080

pragma：no-cache

referer： http：// localhost：8080 / extras / addjobpost

用户代理：Mozilla / 5.0（X11; Linux x86_64）AppleWebKit / 537.36（KHTML，如
Gecko）Chrome / 59.0.3071.115 Safari / 537.36

Request URL:https://us-central1-xxxxxx-prod.cloudfunctions.net/api/post Request Method:OPTIONS
Status Code:403
Remote Address:216.58.198.51:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
access-control-allow-methods:GET, POST
access-control-allow-origin:
cache-control:private
content-encoding:gzip
content-length:32
content-type:text/html; charset=utf-8
date:Tue, 08 Aug 2017 12:23:55 GMT
etag:W/"c-dAuDFQrdjS3hezqxDTNgW7AOlYk"
function-execution-id:d0la00v58w7p
server:Google Frontend
status:403
vary:Accept-Encoding
x-cloud-trace-context:d1b6ff9d729f7e250193a70aea16cac1;o=1
x-cloud-trace-context:d1b6ff9d729f7e250193a70aea16cac1
x-powered-by:Express
Request Headers
:authority:us-central1-xxxxxx-prod.cloudfunctions.net
:method:OPTIONS
:path:/api/post
:scheme:https
accept:/*
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8,ar;q=0.6
access-control-request-headers:authorization,content-type
access-control-request-method:POST
alexatoolbar-alx_ns_ph:AlexaToolbar/alx-4.0.1
cache-control:no-cache
origin:http://localhost:8080
pragma:no-cache
referer:http://localhost:8080/extras/addjobpost
user-agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/59.0.3071.115 Safari/537.36

推荐答案

我将标题替换为params

I replace header to params

getTokenHeader() {
    return this.afAuth.auth.currentUser.getIdToken()
    .then(token => {
        let params = new URLSearchParams();
        params.set('tsid', `Bearer ${token}`);
        return params;
    });
}

并在此函数中调用getTokenHeader

and call getTokenHeader in this function

    addPost(body): Observable<any>{//
        // const url = 'https://us-central1-talentdraw-prod.cloudfunctions.net/api/post';
        let url = this.api.URL['main']+this.api.URL['afterAuth'];

        return new Observable(observer => {
            this.getTokenHeader()
            .then(tokenOptions => {
                // console.log(tokenOptions);

                return this.http.get(url, { 
                    search: tokenOptions
                    })
                    .map((res:Response) => {
                        // this.data = res.json().data;
                        observer.next(res);
                        observer.complete();
                    })
                    .subscribe((data) => {
                        observer.complete();
                    })
                })
                .catch(( error: any ) => {
                    observer.error(error);
                    observer.complete();
                });
        })
    }

这篇关于无法使用授权标头执行发布请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！