Angular 5，httpclient 忽略 post 中的 set 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)

推荐答案

我终于让它工作了！！

解决方案是在发布请求中，

The solution was in post request,

也许我错了，但似乎 RequestOptions 类在 Angular 5.0.0 中已被弃用，因此经过多次尝试找到正确的配置，这是修复的方法

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

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

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

注意:如果应用必须使用使用 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 忽略 post 中的 set cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！