xenoterracide xenoterracide - 1 year ago 123
TypeScript Question

fetch api not returning the location header

Here are my headers copied from chrome

Version 52.0.2743.82 (64-bit)
(have yet to determine whether this is isolated to chrome)

Request URL:http://localhost:8080/users
Request Method:POST
Status Code:201
Remote Address:[::1]:8080

Response Headers
view parsed
HTTP/1.1 201
Access-Control-Allow-Origin: http://localhost:9000
Vary: Origin
Access-Control-Allow-Credentials: true
X-Application-Context: application:xenoterracide,development
Location: http://localhost:8080/users/17
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Length: 0
Date: Thu, 18 Aug 2016 13:51:19 GMT

Request Headers
view parsed
POST /users HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 92
Pragma: no-cache
Cache-Control: no-cache
accept: application/json
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
content-type: application/json
DNT: 1
Referer: http://localhost:9000/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8


here's how I'm creating the fetch client

import 'isomorphic-fetch';
import { Router, RouterConfiguration } from 'aurelia-router';
import { Logger } from 'aurelia-logging';
import { Container, LogManager, autoinject } from 'aurelia-framework';
import { Route } from './main/Route';
import { HttpClient } from 'aurelia-fetch-client';

@autoinject
export class App {
router: Router;
private log: Logger = LogManager.getLogger( App );

constructor( container: Container ) {
let client: HttpClient = new HttpClient;
client.configure( config => {
config.useStandardConfiguration()
.withBaseUrl( 'http://localhost:8080/' )
.withDefaults( {
credentials: 'include',
headers: {
Accept: 'application/json'
}
} );
} );
container.registerSingleton( HttpClient, () => client );
}


this is my service code

@autoinject
export class RegistrationSvc {
private log: Logger = LogManager.getLogger( RegistrationSvc.name );

constructor( private client: HttpClient ) {
}

register( user: RegisterUser ): Promise<any> {
let basic = user.email + ':' + user.passwordCredentials.password;
let log = this.log;
log.debug( `registering ${ basic }` );

return this.client.fetch( 'users', {
method: 'post',
body: json( user )
} ).then( response => {
let location = response.headers.get( "Location" );
log.debug( `location ${ location }` );
} );


I ran this in chromes's console

response.headers.forEach( v => console.log( v ) );
VM783:1 no-cache
VM783:1 no-cache, no-store, max-age=0, must-revalidate
VM783:1 0
undefined


... where are the rest of my headers? why are they missing?

Answer Source

By default the only headers you will be able to get to in your JavaScript from a fetch response are:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

To expose others, send a Access-Control-Expose-Headers header in the response, with the value either being an explicit list of just the headers you want to expose, or * to expose them all.