CODEWITHSUNDEEP
typescriptangularhttp-headerswebpack-dev-server
SnoopDougg
SnoopDougg

Reputation: 1609

Why can't angular2/http set header during development on webpack?

Setting the header works when I build the project's war via gradle and deploy it to tomcat, but for some reason, when I spin up webpack's development server for testing, I get the error:

EXCEPTION: SyntaxError: Failed to execute 'setRequestHeader' on 
'XMLHttpRequest': 'Bearer xxx.yyy.zzz' is not a valid HTTP header field value.
in [null] (browser_adapter.ts:73).

The frustrating thing is this has been intermittent. First I had a JWT that was only 'xxx.yyy' and it worked. Then all of a sudden it didn't. Then I realized I might need to include a fake signature. So I changed it to 'xxx.yyy.zzz' and it worked! Then all of a sudden it didn't. Then I thought maybe the fake signature still had to be the appropriate length for the rest of the JWT. So I increased the length, and it worked. Now it doesn't.

Here's my dev-proxy-settings.js:

module.exports = {
    settings: {
        '/*': {
            target: 'http://localhost:3000/',
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET, POST",
                "Access-Control-Allow-Headers": "Content-Type, Authorization"
            }
        }
    }
};

Here's my use of angular2/http

import {Headers, Http, RequestMethod} from 'angular2/http';
import {RequestOptions, Response} from 'angular2/http';

...

var headers = new Headers({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxx.yyy.zzz'
});
var options = new RequestOptions({
    headers: headers,
    method: RequestMethod.Get,
    url: '/some/url'
});
let httpResponse = this.http.request(options.url, options).map(...);

Am I missing something??

Upvotes: 0

Views: 911

Answers (1)

SnoopDougg
SnoopDougg

Reputation: 1609

The fake signature I added had an invalid character. I'm not sure which character wasn't allowed, but the fake signature I used was blablablafakesignatureblablablanotrealblabl. Changing it to eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee fixed it.

I also added a description of allowed headers to my webpack config file's devServer configuration. Not sure if that helped too, but I'm not seeing that error anymore.

devServer: {
    port: metadata.port,
    host: metadata.host,
    // contentBase: 'src/',
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
    },
    proxy: proxySettings.settings
},

Upvotes: 1

Related Questions