angular2，带有凭据的http。无法添加 cookie

Question

我已经尝试了一段时间来解决这个问题。我需要使用我的凭据连接到远程服务器，我可以毫无问题地做到这一点。接下来，根据我在 angular 1 中的经验，我需要对服务器上的某些资源执行获取操作我需要使用从登录阶段获得的凭据我似乎无法获得正确的方法..

这是我执行登录的方式：

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');
    }
}

这就是我尝试执行下一个 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');
    }
}

可悲的是，我得到的是 401 unauthorized，我已经根据搜索结果尝试了许多其他方法 Google 提供...没有运气。

我能够从 angular 1 个应用程序并使用邮递员连接到相同的服务...

*******更新********

好的，我试过按照 John Baird 对我的问题的回答，但我没能成功。但是我得到了一些关于问题可能是什么的新线索：

服务器响应具有以下 header：

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
我还发现在我的 angular 1 项目中，请求包含一个 header cookie，如下所示：
```
Cookie: B1SESSION=GLWzfesg-sscK-yAH9-PH4m-99r5hCrOdddh; ROUTEID=.node0
```
但我的 angular2 项目没有，即使使用 withCredentials 标志也是如此。

我尝试按照以下的一些想法解决它： https://github.com/angular/angular/issues/4231 通过将此添加到我的主要内容：

class MyBaseRequestOptions extends BaseRequestOptions {
    headers: Headers = new Headers({
        'X-Requested-With': 'XMLHttpRequest'
    });
    withCredentials: boolean = true;
}

bootstrap(AppComponent, [
    provide(RequestOptions, {useClass: MyBaseRequestOptions}) ]);

但我的请求仍然没有发送任何 cookie。

这条路对吗？还有更多想法可以尝试吗？

Answer 1

好的，这是我在登录后获取用户设置的调用。当您登录时，webapi2 returns 一个令牌，可以很好地授权该用户进行任何后续操作。您需要将该令牌作为授权发送 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);
  }

但是你的 CORS 错误是它变得棘手的地方。我正在使用 WebApi 2 并且有许多帖子处理在 IIS 上启用 CORS ....例如这个： Enable CORS in Web API 2

Answer 2

根据要求，我提供了适合我的解决方案。这是我执行登录的方式：

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);

    }

所做的更改是将 withCredentials 和 header 添加到 POST。我没有对我的问题进行任何其他更改，甚至 ****UPDATE**** 部分也是问题。

Answer 3

你可以试试这个解决方案，它对我有用

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);
}

angular2，带有凭据的http。无法添加 cookie

angular2, http with credentials. Can't add cookies

cookies

credentials

angular-http

angular