cookies - 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 应用程序和使用 postman 连接到相同的服务...

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

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

• 服务器响应具有以下 header :

  访问控制允许凭据:true
访问控制允许 header :内容类型，
接受访问控制允许方法:GET、POST、PUT、PATCH、DELETE、OPTIONS
访问控制允许来源:http://localhost:3000

• 我还发现在我的 angular 1 项目中，请求包含一个 cookie header ，如下所示:

  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 返回一个 token ，该 token 可以授权该用户进行任何后续操作。您需要将该 token 作为授权 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