javascript - 获取跨源请求的响应自定义 header

Question

我有一个带有 get 请求的 Angular2/4 应用程序，该请求的响应 header 的 key 为“X-Auth-Key”。当我调用response.header时，我得到默认 header ，然后我调用response.headers.get('X-Auth-Token')，我得到null。下面是我的代码和 Chrome 控制台请求的屏幕截图(var url 在其他地方定义)。

    getToken(id: string, password: string): Observable<User> {
    let headers = new Headers({ 'X-Auth-User': id, 'X-Auth-Key': password });
    return this.http
        .get(url + 'auth', { headers: headers })
        .map(response => {
            let user: User = response.json() as User;

            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify({ user: user, token: response.headers.get('X-Auth-Token') }));

            return user;
        })
   }// Get authorization token

我不确定我做错了什么，但我感谢任何帮助

谢谢!

Answer 1

服务器必须配置为发送 Access-Control-Expose-Headers response header如果您希望允许请求的前端 JavaScript 代码访问 X-Auth-Key 响应 header 值，则在其值中包含“X-Auth-Key”。

如果响应不包含 Access-Control-Expose-Headers header 值，则浏览器允许您从 Web 应用中的客户端 JavaScript 访问的唯一响应 header 是 缓存控制，内容语言，内容类型，过期，最后修改时间和编译指示。

参见https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name了解相关规范。