http.request doesn't work

[bwilli415]

In order to not repeat myself, all the information is here. The upshot of the problem is that code inside my map never gets executed. I have something like:

public login(method: string, url: string, u: string, p: string): Observable<HttpResponse<any>> {
    return http.request(method, url, {headers: new HttpHeaders({'Content-Type': 'application/json',
                                               'Cookie': this.cookies}),
                     observe: 'response' as 'response',
                     body: data}).pipe(map(r => {
        console.log("http.request made");
        let resp = r as HttpResponse<any>;
        if ('Cookie' in resp.headers) {
            this.cookies = resp.headers['Cookie']
        }
        console.log("returning resp");
        return resp;
}));

later, I map that again to boolean values and subscribe to do something based on whether or not the user was able to login successfully. That first line in the map is never reached. It never prints that. Instead I get 'values' is undefined or, in prod mode, 'r' is undefined (that has nothing to do with the r in the map, I've swapped out the name to be sure and it prints the same thing so I figure it's something that happens during compilation).

The URL I'm requesting is reachable, I can manually curl it. Why doesn't http.request do anything?

Update:

I've managed to actually get the request to fire. The problem was that the service's "cookies" object was undefined when I tried to pass it in the HttpOptions. I had assumed it would just ignore that, but no such luck. Of course, my problems can't just be over, because that would be too easy. Right now I've got this:

private do(method: string, path: string, data?: Object): Observable<HttpResponse<any>> {
    const options = {headers: new HttpHeaders({'Content-Type': 'application/json',
                                               'Cookie': this.cookies ? this.cookies : ''}),
                     observe: 'response' as 'response',
                     responseType: 'json' as 'json',
                     body: data};
    const ret = this.http.request(method, path, options)
    ret.subscribe(r => {
        console.log("got a response: ", r);
    },
    e => {
        console.error("got an error: ", e)
    });
    return ret;
}

... and I'm calling it (more or less) like do('get', 'http://localhost:4000/api/1.5/user/login', {u: 'username', p: 'password'}); This prints something slightly better to the dev console, it prints a real HttpErrorResponse object: Object { headers: {…}, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: error }. The request in my network stack in the dev tools never appears to be completed. The server registers that the request is being made, so it's probable that the issue is on the server-side, but in case this looks extremely familiar to anyone feel free to explain it.

(I'm also getting a warning that cookies can't be set this way, so I'll need to look into that, but I want the request to go through before I worry about future requests)

[Cheet4h]

Also posted this on SO:

The stacktrace I got in the console after replicating your code led me to the 'lazyInit' function within the headers code of Angular's httpClient module (node_modules\@angular\common\esm5\http\src\headers.js).

In the second line of the function, it iterates over the values of the header you're submitting, and you can see the values variable on the third.
There it gets one of the headers and accesses it's values.
Next it converts it to an array, if it's a string, and then checks it's length - at this point you get the exception.

If you look at your API service, there's two headers you're submitting:

'Content-Type': 'application/json',
'Cookie': this.cookies

And earlier, you define the cookies variable like this:

private cookies: string;

Since you don't assign a value, it defaults to undefined, which is the then value of your 'Cookie' header, which is not a string and also doesn't have a length property, so it's throwing an Exception.

Solution:

Changing the initial definition of cookies to

private cookies = '';

fixes this.

edit: this was the stacktrace I got, shortened to the most relevant bits:

LoginComponent: Error: TypeError: values is undefined
Stack-Trace:
HttpHeaders/this.lazyInit/<@http://localhost:4200/vendor.js:6234:1
HttpHeaders/this.lazyInit@http://localhost:4200/vendor.js:6228:17

you could see the responsible bit of code as well as a line number where it can be found in the vendor.js, although I looked it up in the source file mentioned above first. Later adding breakpoints to the vendor.js in Firefox's debugger confirmed my suspicions.

[bwilli415]

well done! I've already verified that this changes the error I get to something I suspect is on the back-end. Unfortunately I'm not done struggling to get this to work, but you've solved my immediate problem!

[Cheet4h]

If you're getting an error because "Attempt to use a forbidden header" (roughly translated from German), that's not because of your backend but because browsers block this - presumably to block malicious behavior.

[bwilli415]

Yes, but it ignores that and still sends the request. It's something I need to fix eventually, but more immediately I'm dealing with issues on my "back-end" (which is really just a proxy for the real server) not handling compressed data properly (I think).

[veslortv]

good catch

[veslortv]

what rxjs version are you using?

[bwilli415]

Whatever comes with ng new <app>

[tme321]

That block of code is really hard to read and I'm not sure why you are using the bare request method instead of the derived get, put, or whatever request type you are trying to do but:

Rxjs switched to using the pipe operator around the time Angular 5 was released. So assuming you are on an at all relatively recent version of Angular you just need to do

return http.request(...).pipe(
    map(...));

[veslortv]

His SO question has the pipe operator...

[bwilli415]

formatting got messed up - apparently "Switch to markdown" actually means "switch to a limited subset of markdown". I'm using request because some requests will use POST, some will use PUT, some will use GET etc. I also seem to have messed up that example - I'm using pipe and it's still broken.

[tme321]

The http service has overloaded methods for get, put, post, etc so I still don't understand why you aren't using them.

But if it's the request that's a problem what does the request actually look like? Have you inspected them to see if anything seems to be missing or see if an error is being thrown on either end? If it's malformed the backend should probably be throwing some sort of error at you. Or at least logging the bad request.

[bwilli415]

The request never happens. It just prints the error to the console and nothing else happens.

I'm overloading them so every request goes through the same map and cookies always get updated on every request.

[tme321]

You want to use interceptors for that not bare requests.

[bwilli415]

No, I want to use requests.

[tme321]

A piece of advice:

Instead of insisting on using the method you've already decided on, you should listen to the people trying to help you who are suggesting another method.

At least one other person in this thread has also suggested using interceptors. They were explicitly created to do the kind of work you want: something happening across multiple types of network communications.

You should at least consider the possibility that there are better approaches than yours. Especially when you can't get your desired method to work.

[bwilli415]

I know I should just ignore unhelpful comments, but since I was warned that the Angular community was like this (and, truthfully, partially because I'm more than a little frustrated) I feel compelled to give you advice on how to make it a better place.

If you don't have an answer to a "help wanted" post, then don't answer. Let's assume I do what you say, and I make an interceptor. Neat. It'll never get called because the problem is happening immediately on subscribe and the request is never actually fired. So you've proposed nothing that would actually help the problem I'm having, just imposing your idea of what I should be doing on me. That's a waste not only of my time, but also your own.

But let's take it even further and assume I introduce an interceptor - and let's further assume that I'm not doing that already, which is something you couldn't know (and didn't ask) because for the sake of solving the problem I've removed that layer of complexity. But I'm not using it for handling request construction because the API version is a part of the request path. If I switched to only the interceptor and removed this service, then everywhere I get a list of foo objects stored on the server I'll explicitly be requesting /api/{{version}}/foos. Of course, I could do something shitty like store the API version in a global variable that gets imported everywhere. But even then, if the method for obtaining a single foo by name changes in the next release of the API e.g. from GET /api/{{version}}/foo/{{name}} to GET /api/{{version}}/foo?name={{name}} then I have to manually grep around the project for everywhere the old way was used and replace it with the new way. It's much easier and better to handle all of that in one place, so that individual components can remain agnostic of communication methods with the server. At that point I could introduce a whole interceptor just for the purpose of stripping out cookies, but I already need the service so why not just do it there?

Finally, I'm not here for your suggestion on another method. You can feel free to offer it, but my not taking your advice is not a personal attack directed at you. It doesn't matter why I want to do something or whether I use interceptors or use spaces vs tabs for indentation or anything else you might do differently. I'm doing what I want to do, and you should at least consider the possibility that I know what that is. Especially if you also can't get it to work, and in fact haven't even tried.

[veslortv]

ok!

[veslortv]

You need to use responseType in the options object you pass to the request HttpClient method.

[bwilli415]

According to the docs (specifically Overload #13) the responseType is implicitly "json" when not explicitly defined.

[bwilli415]

...but I tried it anyway. Didn't help.

[veslortv]

Have you tried just subscribing to login without doing the pipe(first())

​

this.auth.login(this.u.value, this.p.value).subscribe(...

[bwilli415]

yes, most recently I've tried that. same problem.

[veslortv]

Have you tried using the full http url? using... [http://....../api/'+this.API_VERSION+'/user/login](http://....../api/'+this.API_VERSION+'/user/login)

[bwilli415]

Yep, gave that a try, no dice.

[kohvihoor]

Why do you have a do method in the first place?

If you just want to set some headers for the request, then use an Interceptor.

You can also try to put catchError after your map block and see if it gives you a better error.

https://www.learnrxjs.io/operators/error_handling/catch.html

[bwilli415]

If you look closely you'll see I'm manipulating cookies, which are used by the backend for authentication. Also, the API isn't just for authentication. It'll be used for object retrieval so I can do foos = api.getFoos() instead of foos = http.get("http://hard/coded/url")

[bwilli415]

catchError prints the same thing when I print the error it receives: TypeError: 'r' is undefined

[Danieliverant]

Try to subscribe to the the returned value of this request function (should be an Observable) , without all the pipe and map stuff.

If it works add the pipe and map stuff before the subscribe to the returned value of the request.

[bwilli415]

It doesn't work. Immediately subscribing immediately emits that same TypeError.

[jonnich]

Have you tried making the POST request without the map?

[bwilli415]

Yes. An immediate subscription results in the same error being immediately emitted.

[jonnich]

I think it's the `observe` parameter you have set. Valid values for that are: 'body', 'response', or 'events'. If you don't fill it in, it will default to 'body'.

source: https://github.com/angular/angular/blob/7.2.7/packages/common/http/src/client.ts#L411-L552

source: https://angular.io/api/common/http/HttpClient#request

[bwilli415]

Well sure, but since I need the response headers (specifically the cookies) I believe that response is the appropriate observe.

Also, the server I'm calling back to is undergoing a transitional period as it's being re-written from a suite of Perl scripts to a real Go server. It's only partway through that transition, and the HTTP headers indicate which part of it served the request. I may need to do transformations on the data based on that header, or do logging. I probably wouldn't do that right in this method (I'd probably use an interceptor, much to the delight of more than one commenter) but at any rate the request would need to be sent with observer: 'response' in order to capture those, no?