Angular 5不会将身份验证Cookie发送回 [英] Angular 5 wont send auth cookie back

问题描述

我有一个Angular 5应用程序和一个ASP.net core 2.0 rest api.当它们都在本地主机上运行时，我的身份验证就可以了.我最近将其余api部署在另一台服务器上，突然我无法进行身份验证.我通过以下方式在服务器上启用了CORS:

I have an Angular 5 app and an ASP.net core 2.0 rest api. When they are both running on localhost, my authentication works just fine. I have recently deployed the rest api on another server and suddenly I can no longer authenticate. I have CORS enabled on the server via:

app.UseCors(options =>
{    
    options.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials();
});

在Angular中，我设置了我的请求选项:

In Angular, I setup my request options:

var headers: Headers = new Headers();
headers.append('Content-Type', 'application/json')

var requestOptions = new RequestOptions({
    headers: headers,
    withCredentials: true,
});

使用提琴手，我观看了登录POST请求，并看到响应包含:

Using fiddler, I watch my login POST request and see that the Response contains:

Set-Cookie: .AspNetCore.Identity.Application=CfD...;expires=Thu, 16 Aug 2018 21:25:02 GMT; path=/; samesite=lax; httponly

但是，在重定向回到首页之后，我发出了api请求，以查看用户是否已登录

However, after the redirect back to the home page, I make an api request to see if a user is logged in

 var url = this.runtimeConfig.getConfig().apiUrl + `api/Auth/IsUserLoggedIn/`;
 return this.http.get(url, requestOptions).toPromise().then(response => {
     return <BoolDTO>ServerMessages.deserialize(response);
 });

来看提琴手，这个GET请求不包含两个应用程序都在本地主机上时的COOKIE标头.

Looking at fiddler, this GET request does not contain a COOKIE header as it did when both apps were on localhost.

更奇怪的是，如果我随后将URL http://<serverip>:<port>/api/Auth/IsUserLoggedIn/粘贴到浏览器的地址栏中，它会发送COOKIE标头并说用户已登录.

Odder still, if I then paste the url http://<serverip>:<port>/api/Auth/IsUserLoggedIn/ into my browser's address bar, it does send the COOKIE header and says that a user is logged in.

我是否需要做一些事情才能使Angular的http客户端存储并重新发送cookie?

Is there something I need to do to get Angular's http client to store and resend the cookie?

推荐答案

似乎是cookie上的samesite=lax设置. 松懈"会限制这种情况似乎很奇怪，但是 ASP.net的SameSiteMode.LAX的文档说:

It looks like it was the samesite=lax setting on the cookie. It seems odd that "lax" would restrict this scenario, but the documentation for ASP.net's SameSiteMode.LAX says:

LAX-Cookie会与相同站点"请求和跨站点"顶级导航一起发送.

LAX - The cookie will be sent with "same-site" requests, and with "cross-site" top level navigation.

由于XHR请求不是顶级导航，因此不会发送cookie.解决方案是从ConfigureServices

Since XHR requests are not top level navigation, it would not send the cookie. The solution to this is to remove the SameSite from the cookie on the server in ConfigureServices

services.ConfigureApplicationCookie(options =>
{
    options.Cookie.SameSite = SameSiteMode.None;
});

我应该提到的是，这样做会使您的网站打开 CSRF攻击，但是如果您希望将客户端前端托管在与REST API不同的服务器上，这似乎是唯一的方法.我可能会重新设计我的项目，以便将前端和后端托管在同一台服务器上.

I should mention that doing this opens your site to CSRF attacks, but if you want a client side frontend hosted on a different server than a REST API, this seems to be the only way. I will likely re-work my project so that the front and back end are hosted on the same server.

这篇关于Angular 5不会将身份验证Cookie发送回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！