Angular 2:剥离了来自HttpResponse的HttpHeaders.怎么修? [英] Angular 2 : Reply HttpHeaders from HttpResponse are stripped. How to fix?

问题描述

我一直试图找出答案，但是找不到相关的文档或示例.

I've been trying to figure this out but I can't find relevant documentation or examples.

我正在向我的测试Rails服务器发送一个请求，并且答复只有2个标头，而使用REST测试工具(例如邮递员)时，我得到了所有期望的标头.

I'm sending a request to my test rails server and the reply only has 2 headers, while using a REST test tool (such as postman) I get all the expected headers.

这是我叫服务器的方式:

This is how I call the server:

// Base Class
@Injectable()
export class BaseResource {
  constructor(
    protected http : HttpClient, 
    protected authTokenService : AuthTokenService,
    protected storage : LocalStorageService
  ){}

  public getHost() : string {
    let server = this.storage.get<string>("server");
    if (server.lastIndexOf("http", 0) !== 0) {
      server = "https://" + server + ".example.com/v2";
    }
    return server;
  }

  public getHostUrl(resource: string) : string {
    return this.getHost() + "/" + resource;
  }

  public performGet(url : string) : Observable<any> {
    return this.http.get(this.getHostUrl(url), this.getHttpOptions());
  }

  public performPost(url : string, body : {}) : Observable<any> {
    return this.http.post(this.getHost(url), body, this.getHttpOptions());
  }

  protected getHttpOptions() : {} {
    const authToken = this.authTokenService.getAuthHeaderValue();
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': authToken
      }),
      observe: 'response'
    };
    return httpOptions;
  }
}

这是精简的专用子实例

@Injectable()
export class EntryResource extends BaseResource {

  get(): Observable<any> {
    return this.performGet("entries");
  }
}

这就是所谓的一切

@Injectable()
export class EntryService {
  constructor(private resource: EntryResource) { }

  getEntries() : Promise<Entry[]> {
    return new Promise((resolve, reject) => {
      this.resource.get().subscribe(
        data => {
          console.log(data.headers.keys());
          resolve(data.body as Entry[]);
        },
        error => {
          reject(error);
        }
      );
    });
  }
}

在所有这些操作的最后，将以下标题打印到控制台:

At the end of all this, the following headers are printed to the console:

(2) ["content-type", "cache-control"]

这是邮递员显示的标题:

And here are the headers displayed by postman:

Cache-Control →max-age=0, private, must-revalidate
Connection →Keep-Alive
Content-Length →3416
Content-Type →application/json; charset=utf-8
Date →Fri, 23 Mar 2018 19:38:44 GMT
Etag →W/"914d1759e9dcdbdb05450efa629a0b03"
Server →WEBrick/1.3.1 (Ruby/2.3.1/2016-04-26)
Vary →Origin
X-Content-Type-Options →nosniff
X-Frame-Options →SAMEORIGIN
X-Pagination →{"total":123,"total_pages":9,"current_page":1,"first_page":true,"last_page":false,"next_page":2,"out_of_bounds":false,"page_size":15}
X-Request-Id →20cccf61-4816-4e61-a7a7-c71adeb604d7
X-Runtime →0.922868
X-Xss-Protection →1; mode=block

为什么标题被角形剥离?

Why are the headers stripped by angular?

推荐答案

尝试设置 Access-Control-Allow-Headers 标头服务器端以公开这些标头

Try setting the Access-Control-Allow-Headers header server side to expose these headers

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Access-Control-Allow-Headers: X-Frame-Options, X-header-2

之所以需要这样做，是因为出于安全原因，浏览器实现了CORS，而测试工具(邮递员，其他其他客户端)和非浏览器应用则没有.我不知道android，但是我猜想，如果使用webviews，您将需要CORS

This is needed because browsers implement CORS for security reasons, while testing tools (Postman, other rest clients) and non browser apps do not. I don't know android, but my guess is that you'd need CORS if using webviews

这篇关于Angular 2:剥离了来自HttpResponse的HttpHeaders.怎么修?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！