Angular 5，httpclient忽略帖子中的设置cookie [英] Angular 5, httpclient ignores set cookie in post

问题描述

我正在Angular 5中处理HttpClient，问题是服务器在登录过程中发送的cookie，似乎Angular忽略了它，因为带有"withCredentials"的下一个请求未设置它.

I'm dealing with HttpClient in Angular 5, the problem is the cookie sent by the server during login process, it seems that Angular is ignoring it because next request with "withCredentials" is not setting it.

我的package.json

My package.json

.... "@ angular/cli":"1.6.3"， "@ angular/compiler-cli":"^ 5.0.0"， "@ angular/language-service":"^ 5.0.0"， ....

.... "@angular/cli": "1.6.3", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", ....

我的代码

makeLogin (us:string, password:string): Observable<any> {
    let body : any = new HttpParams()
      .set('username', us)
      .set('password', password);
    return this.http.post(this.urlLogin,
      body.toString(),

      {
        headers: new HttpHeaders()
          .set('Content-Type', 'application/x-www-form-urlencoded')
      }
    );
  }

服务器返回带有这些标头的http 200

Server returns http 200 with these headers

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:17
Date:Tue, 23 Jan 2018 21:05:46 GMT
Expires:0
Pragma:no-cache
Set-Cookie:JSESSIONID=BF9392ED5DE99710B44845201DD26B3F;path=/;HttpOnly
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

之后，例如下一个请求

getEventt (): Observable<any> {
    return this.http.get('http://localhost:8080/list',{ withCredentials: true });
  }

使用chrome或firefox开发人员工具，我看不到cookie的发送，但是如果使用浏览器或邮递员，一切正常，我可以看到cookie的发送.

Using chrome or firefox developer tools I can't see the cookie sent, but If I use browser or postman everything works fine and I can see the cookie been sent.

我不知道我做错了什么，还是使用了错误的httpClient.

I don't know if I'm doing something wrong or maybe using httpClient in a bad way.

如果有帮助，则将服务器部署在tomcat 8上，而Angular应用则在nodejs上运行(npm start)

If it helps, server is deployed on tomcat 8, and Angular app is running on nodejs (npm start)

推荐答案

最后，我能够使其正常工作！

Finally I was able to made it work!!

解决方案是在后期请求中，

The solution was in post request,

也许我是错的，但是在Angular 5.0.0中似乎不推荐使用RequestOptions类，因此在尝试几次正确的配置之后，这是固定的方法

Maybe I'm wrong but it seems like RequestOptions class was deprecated in Angular 5.0.0, so after several attempts hit the right configuration, Here is the method fixed

/** POST: add a new hero to the server */
makeLogin (us:string, password:string): Observable<any> {
    let enco : any = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded');

    let body : any = new HttpParams()
    .set('username', us)
    .set('password', password);
    return this.http.post(this.urlServicioLogin,
     body.toString(),
     {
       headers: enco,withCredentials:true
     }
   );
}

现在withwithCredentials为true，我可以在浏览器中看到正在设置的cookie，然后将其与后续请求一起发送.

Now with withCredentials true I can see in browsers the cookie being set, and after that send it with subsequent requests.

注意:如果应用程序必须使用REST服务，而REST服务是使用cookie进行身份验证，则所有与后端的交互都需要将withCredentials标志设置为true.

Note: If the app has to consume a rest service where auth is made with cookies ALL interactions with backend will need withCredentials flag set to true.

这篇关于Angular 5，httpclient忽略帖子中的设置cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！