angular2, http with credentials. Can't add cookies

Question

I Have been trying for some time to get past this problem. I need to connect to a remote server with my credentials, I am able to this with no problems. Next I need to perform a get for some resource on the server, from my experience in angular 1 I need to use the credentials I got from the login stage I just can't seem to get the right way to do it..

This is how I preform my login:

import { Injectable } from 'angular2/core'; import { IjobCard } from '../jobCard/jobCard'; import { Http, Response } from 'angular2/http'; import { Observable } from 'rxjs/Observable'; import { Icredentials } from './credentials'; @Injectable() export class LoginService { private _loginUrl = 'MyUrl/Login'; loginCred: Icredentials = { "filed1": "dummy1", "filed2": "dummy2", "filed3": "dummy3" }; constructor(private _http: Http){ } login(): Observable<any>[] { return this._http.post(this._loginUrl, JSON.stringify(this.loginCred)) .map((response: Response) => <any[]>response.json()) .catch(this.handleError); } private handleError(error: Response){ console.error(error); return Observable.throw(error.json().error || 'Server error'); } }

And this is how I am trying to execute my next get:

import { Injectable } from 'angular2/core'; import { IjobCard } from './jobCard'; import { Http, Response, Headers } from 'angular2/http'; import { Observable } from 'rxjs/Observable'; @Injectable() export class JobCardService { private _jobCardUrl = 'MyUrl/SomeGet'; constructor(private _http: Http) { } getJobCard(): Observable<any>[] { var myHeders = new Headers(); myHeders.append('Content-Type', 'application/json'); return this._http.get(this._jobCardUrl, { headers: myHeders, withCredentials: true} ) .map((response: Response) => <any[]>response.json()) .catch(this.handleError); } private handleError(error: Response){ console.error(error); return Observable.throw(error.json().error || 'Server error'); } }

Sadly, what I get back is an 401 unauthorised, I already tried many other methods based on the search result Google provides... no luck.

I was able to connect to the same service from an angular 1 app and by using postman...

*******UPDATE********

Ok, I tried following John Baird answer to my question but I couldn't make it work. But I got some new clues to what the problem could be:

The server respose has the following headers:

Access-Control-Allow-Credentials: true access-control-allow-headers: content-type, accept access-control-allow-methods: GET, POST, PUT, PATCH, DELETE, OPTIONS access-control-allow-origin: http://localhost:3000
I also found out that in my angular 1 project the request to contains a header of cookie like so:
```
Cookie: B1SESSION=GLWzfesg-sscK-yAH9-PH4m-99r5hCrOdddh; ROUTEID=.node0 
```
but my angular2 project did not, even when using the withCredentials flag.

I tried solving it by following some ideas from : https://github.com/angular/angular/issues/4231 by adding this to my main:

class MyBaseRequestOptions extends BaseRequestOptions { headers: Headers = new Headers({ 'X-Requested-With': 'XMLHttpRequest' }); withCredentials: boolean = true; } bootstrap(AppComponent, [ provide(RequestOptions, {useClass: MyBaseRequestOptions}) ]);

but still no cookies are sent with my request.

Is this the right path? Any more ideas to try?

Since I don't know what do you mean I guess I am not. Can you please provide some example? — Ravid Goldenberg
– Ravid Goldenberg, Commented Sep 11, 2016 at 17:45
Ok, I believe I understood what you meant and implemented it successfully, now I am getting : missing token 'authorization' in CORS header 'Access-Control-Allow-Headers' — Ravid Goldenberg
– Ravid Goldenberg, Commented Sep 11, 2016 at 18:58
I have the same problem ... have you sorted it out? Would you mind to share your solution in case you did? — Tomas Babic
– Tomas Babic, Commented Mar 12, 2017 at 9:13

Community · Accepted Answer · 2017-05-23 12:25:42Z

Okay, here's my call to get user settings after login. When you login, webapi2 returns a token which is good to authorize that user for any subsequent operations. You need to send that token as an Authorization header...

getSettingsData(userId: number): Observable<User> { var headers = new Headers(); headers.append('Content-Type', this.constants.jsonContentType); var t = localStorage.getItem("accessToken"); headers.append("Authorization", "Bearer " + t); return this.http.get(this.constants.userUrl + userId, { headers: headers }) .map((response: Response) => <User>response.json()) .catch(this.handleError); }

But your CORS error is where it gets tricky. I'm using WebApi 2 and there are a number of posts which deal with enabling CORS on IIS.... this one for example: Enable CORS in Web API 2

Thank you for your answer, I tried it but it did not work, I will edit my post to reflect this attempts and everything I learned so far, please comment more if you have anything to add!

Ravid Goldenberg · Accepted Answer · 2017-03-13 14:30:01Z

As Requested I supply the solution that worked for me. This is how I preform my login:

import { Injectable } from 'angular2/core'; import { IjobCard } from '../jobCard/jobCard'; import { Http, Response } from 'angular2/http'; import { Observable } from 'rxjs/Observable'; import { Icredentials } from './credentials'; @Injectable() export class LoginService { private _loginUrl = 'MyUrl/Login'; loginCred: Icredentials = { "filed1": "dummy1", "filed2": "dummy2", "filed3": "dummy3" }; private headers = new Headers({ 'Content-Type': 'application/json' }); constructor(private _http: Http){ } login(): Observable<any>[] { return this._http.post(this._loginUrl, JSON.stringify(this.loginCred), { headers: this.headers, withCredentials: true }) .map((response: Response) => <any[]>response.json()) .catch(this.handleError); }

The change was is adding withCredentials and the header to the POST. I Haven't made any other changes to my, not even the ****UPDATE**** section it the question.

pacholik · Accepted Answer · 2017-04-02 10:55:09Z

You can try this solution, it works for me

private getHeaders(){ let headers = new Headers(); headers.append('Content-Type', 'application/json'); headers.append('Accept', 'application/json'); return headers; } public getAll = (): Observable<Account[]> => { return this._http.get(this.actionUrl,{ headers: this.headers, withCredentials: true }) .map((response: Response) => <Account[]>response.json()) .catch(this.handleError); }

Collectives™ on Stack Overflow

angular2, http with credentials. Can't add cookies

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related