即使withCredentials为true,Angular也不会发送在Set-Cookie中收

总之,这不是Angular的问题.我发送的cookie上有secureCookie标志.当我在没有https的情况下测试我的应用程序时,似乎角度应用程序没有使用(或获取访问)200 OK中收到的Set-Cookie标头.

我将登录请求发送到服务器并处理其响应的初始代码是

return this.http.post(this.SIGNIN_USER_URL,body,httpOptions)
      .map(response=>{
        console.log('response from backend service',response);
        let result= <ServerResponse>response; 
        console.log("result is "+result.result+' with additional information '+result.additionalInformation)
        return result;
      })
      .catch(this.handleError);

我没有使用observe：’response’选项,这意味着响应只包含正文,而不是标题.我将代码更改为以下,以便我可以看到正在接收哪些标头.

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),withCredentials: true,observe: 'response' as 'response'
};  

public signinUser(user:UserSigninInfo):any{
    console.log('contacting server at '+this.API_URL +this.SIGNIN_USER_URL +" with user data "+user+ " with httpOptions "+httpOptions.withCredentials + ","+httpOptions.headers ); 

    let signinInfo= new UserSignin(user);
    let body = JSON.stringify(signinInfo);
    return this.http.post(this.SIGNIN_USER_URL,httpOptions)
      .catch(this.handleError);
  }

上面的代码被调用如下.我改变它以获得响应中的标题

return this.bs.signinUser(user).subscribe((res:HttpResponse<any>)=>{console.log('response from server:',res);
  console.log('response headers',res.headers.keys())
} );

我还创建了一个截取器来打印传入和传出的消息(从SO复制)

import {HttpEvent,HttpHandler,HttpInterceptor,HttpRequest,HttpResponse} from "@angular/common/http";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/do';

@Injectable()
export class CustomInterceptor implements HttpInterceptor {

  constructor() {
  }

  intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {

    console.log("outgoing request",request);
    request = request.clone({
      withCredentials: true
    });
    console.log("new outgoing request",request);

    return next
      .handle(request)
      .do((ev: HttpEvent<any>) => {
        console.log("got an event",ev)
        if (ev instanceof HttpResponse) {
          console.log('event of type response',ev);
        }
      });
  }
}

当我开始调试时,我注意到虽然服务器正在发送10个标题,但只有9个被打印

服务器的标头

在控制台上打印消息(Set-Cookie丢失！我的应用程序需要获取身份验证cookie的标头)

0: "Content-Length"
?
1: "Content-Security-Policy"
?
2: "Content-Type"
?
3: "Date"
?
4: "Referrer-Policy"
?
5: "X-Content-Type-Options"
?
6: "X-Frame-Options"
?
7: "X-Permitted-Cross-Domain-Policies"
?
8: "X-XSS-Protection"
?
length: 9

这给了我一个方向,即应用程序没有看到Set-Cookie标头.我以为我可以通过在play框架中添加CORS策略来解决它：exposedHeaders = [“Set-Cookie”]但是没有用.后来我仔细查看了cookie并发现了secureCookie设置

Set-Cookie: id=...Secure; HTTPOnly

这让我觉得可能我的cookie设置对我的环境是错误的(localhost,没有HTTPS).我更改了Silhoutte中的cookie设置

val config =  CookieAuthenticatorSettings(secureCookie=false)

它奏效了！

虽然我将上面的代码用于secureCookie,这对Angular来说不是问题,但我希望有些人可能会觉得这个方法很有帮助