Cookies angular2，具有凭据的http。Can'；不要加饼干

一段时间以来，我一直在努力克服这个问题。我需要用我的凭据连接到远程服务器，我可以毫无问题地连接到它。接下来，我需要对服务器上的某些资源执行get，根据我在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');
    }
}

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

    }

但是我的angular2项目没有，即使使用withCredentials标志

我试图通过以下几点想法来解决这个问题： 通过将此添加到我的主目录：

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

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

但我的请求仍然没有发送cookies

---

这条路对吗？还有什么好尝试的吗？

好的，这是我登录后获取用户设置的电话。登录时，webapi2返回一个令牌，该令牌可用于授权该用户进行任何后续操作。您需要将该令牌作为授权标头发送

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

getSettingsData（userId:number）：可观察{
var headers=新的headers（）；
headers.append（'Content-Type'，this.constants.jsonContentType）；
var t=localStorage.getItem（“accessToken”）；
标题。附加（“授权”、“持票人”+t）；
返回this.http.get（this.constants.userUrl+userId，{headers:headers}）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）；
}

但你的CORS错误是它变得棘手的地方。我正在使用WebApi 2，有很多帖子都是关于在IIS上启用CORS的。。。。这个例子：

---

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

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

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

    }

从'angular2/core'导入{Injectable}；
从“../jobCard/jobCard”导入{IjobCard}；
从'angular2/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
从“/credentials”导入{Icredentials}；
@可注射（）
导出类登录服务{
private _loginUrl='MyUrl/Login'；
登录：Icredentials={
“filed1”：“dummy1”，
“filed2”：“dummy2”，
“filed3”：“dummy3”
};
私有头=新头（{'Content-Type'：'application/json'}）；
构造函数（私有的http:http）{
}
login（）：可观察[]{
返回此._http.post（this._loginUrl，JSON.stringify（this.loginCred）），
{headers:this.headers，withCredentials:true}）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）；
}

---

更改是将凭据和标题添加到帖子中。我没有对我的进行任何其他更改，甚至没有对****更新****部分进行任何更改。您可以尝试此解决方案，它适用于我

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

private getHeaders（）{
let headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
headers.append（'Accept'，'application/json'）；
返回标题；
}
公共getAll=（）：可观察=>{
返回此。\u http.get（this.actionUrl，{headers:this.headers，withCredentials:true}）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）；
}

您是否包括授权标头？因为我不知道您的意思，我想我没有。您能提供一些示例吗？好的，我相信我理解您的意思并成功地实现了它，现在我得到了：CORS标头“Access-Control-Allow-Headers”中缺少令牌“Authorization”.我也有同样的问题……您有吗ted出来了？你介意分享你的解决方案吗？谢谢你的回答，我试过了，但是没有用，我会编辑我的帖子来反映我的尝试和我迄今为止学到的一切，如果你有什么要补充的，请多加评论！