Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 361
xenoterracide Avatar asked Aug 18 '16 14:08

xenoterracide


People also ask

How do I get the location header response?

To check this Location in action go to Inspect Element -> Network check the response header for Location like below, Location is highlighted you can see.

What is Location header in REST API?

The Location response header's value is a URI that identifies a resource that may be of interest to the client. In response to the successful creation of a resource within a collection or store, a REST API must include the Location header to designate the URI of the newly created resource.

What are headers in a fetch request?

The Headers interface of the Fetch API allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.


1 Answers

By default the only headers you’ll 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 response header, with the value either being an explicit list of just the headers you want to expose, or * to expose them all.

like image 135
sideshowbarker Avatar answered Jan 03 '23 11:01

sideshowbarker