Question

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

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

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
存取控制允许来源：
缓存控制：私人
编码内容：gzip的
内容长度：32
内容类型：文本/ HTML;字符集= UTF-8
日期：2017年8月8日星期二12:23:55 GMT
ETAG：W /＆＃34; C-dAuDFQrdjS3hezqxDTNgW7AOlYk＆＃34;
函数执行-ID：d0la00v58w7p
服务器：谷歌前端
状态：403
有所不同：接受编码
的x云跟踪上下文：d1b6ff9d729f7e250193a70aea16cac1;○= 1
X-云迹上下文：d1b6ff9d729f7e250193a70aea16cac1
X-通电方式：快速
请求标题
：权威：us-central1-xxxxxx-prod.cloudfunctions.net
：方法：OPTIONS
：路径：/ API /后
：方案：HTTPS
接受： / *
accept-encoding：gzip，deflate，br
接受语言：EN-US，EN; Q = 0.8，AR; Q = 0.6
访问控制请求报头：授权，内容类型
访问控制请求-方法：POST
alexatoolbar-alx_ns_ph：AlexaToolbar / ALX-4.0.1
缓存控制：无缓存
起源：http://localhost:8080
附注：无缓存
引用者：http://localhost:8080/extras/addjobpost
user-agent：Mozilla / 5.0（X11; Linux x86_64）AppleWebKit / 537.36（KHTML，如
Gecko）Chrome / 59.0.3071.115 Safari / 537.36

Answer 1

请使用以下代码。

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
headers.append('Authorization', 'Bearer ' + 'token');

let order = 'order=foobar';
console.log("data");

 return this.http.post(url, body, { headers: headers })
     .map((res: any) => res.json());

Answer 2

更好的方法是创建一个扩展默认http模块的拦截器

创建interceptor.ts

import {
    Http,
    Request,
    RequestOptionsArgs,
    Response,
    RequestOptions,
    ConnectionBackend,
    Headers
}
    from '@angular/http';

import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpInterceptor extends Http {

    constructor(private backend: ConnectionBackend, private defaultOptions: RequestOptions, private router: Router) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, this.getRequestOptionArgs(options)));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.get(url, this.getRequestOptionArgs(options)));
    }

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, this.getRequestOptionArgs(options)));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options === null) {
            options = new RequestOptions();
        }

        if (options === undefined) {
            options = new RequestOptions();
        }

        let headers = new Headers();
        let key = 'auth.jwt.token';
        let item = localStorage.getItem(key) ? localStorage.getItem(key) : null;
        let parsedToken = JSON.parse(item);

        headers.append('Authorization', 'Bearer ' + parsedToken.token);
        if(options.headers) {
          headers.append('Content-Type', 'multipart/form-data');
          headers.append('accept', 'application/json');
        } else {
          headers.append('Content-Type', 'application/json');
        }
        //Clearing the headers and appending the token + content type every request.
        options.headers = new Headers();

        options.headers = headers;

        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            if (err.status === 401 && !err.endsWith(err.url, 'api/auth/login')) {
                this.router.navigate(['/login']);
                return Observable.empty();
            } else {
                return Observable.throw(err);
            }
        });

    }
}

在app.module.ts内：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { XHRBackend, RequestOptions, Http, HttpModule } from '@angular/http';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpInterceptor } from 'interceptor.ts';

export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) {
  return new HttpInterceptor(xhrBackend, requestOptions, router);
}
@NgModule({
    imports: [BrowserModule, AppRoutingModule, HttpModule, SharedModule.forRoot()],
    declarations: [AppComponent],
    providers: [{
        provide: APP_BASE_HREF,
        useValue: '<%= APP_BASE %>'
    }, SomeService, AnotherService, 
    {
        provide: Http,
        useFactory: httpInterceptorFactory,
        deps: [XHRBackend, RequestOptions, Router]
    }],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后按照惯例调用http，例如this._http.get().map()，拦截器将为您附加令牌。

编辑：

更新了包含基本app.module.ts

的答案

Answer 3

我将标题替换为params

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

并在此函数中调用getTokenHeader

{{1}}

无法使用授权标头

3 个答案: