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

Posted 2023-02-27

【中文标题】angular2，带有凭据的http。无法添加 cookie

【英文标题】：angular2, http with credentials. Can't add cookies

【发布时间】：2017-01-19 03:53:03

【问题描述】：

我已经尝试了一段时间来解决这个问题。我需要使用我的凭据连接到远程服务器，我可以毫无问题地做到这一点。接下来，我需要在服务器上执行获取某些资源的操作，根据我在 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';
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，我已经根据 Google 提供的搜索结果尝试了许多其他方法......没有运气。

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

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

好的，我尝试按照 John Baird 回答我的问题，但无法成功。但我得到了一些新的线索来说明问题可能出在哪里：

服务器响应具有以下标头：

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 项目中，请求包含一个像这样的 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。

这是正确的道路吗？还有什么想法可以尝试吗？

【问题讨论】：

是否包含授权标头？

既然我不知道你是什么意思，我想我不是。可以举个例子吗？

好的，我相信我理解您的意思并成功实施它，现在我得到：CORS 标头“Access-Control-Allow-Headers”中缺少令牌“授权”

我也有同样的问题...你解决了吗？如果您愿意，您愿意分享您的解决方案吗？

【参考方案1】：

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

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

【参考方案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 和标头添加到 POST。我没有对我的问题进行任何其他更改，甚至没有对问题进行 ****UPDATE**** 部分。

【参考方案3】：

好的，这是我在登录后获取用户设置的电话。当您登录时，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);
  

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

【讨论】：

感谢您的回答，我试过了，但没有成功，我将编辑我的帖子以反映这种尝试以及我到目前为止所学到的一切，如果您有什么要补充的，请发表更多评论！