c# - Set-cookie 不适用于 Dot net Core 3.1 中的跨站点请求/响应 & React 设置同站点 cookie 和/或 CORS 问题

Question

好吧，我难住了!几个小时以来，我一直在尝试解决这个问题，但没有运气。我正在关注 this guide在我正在学习整个设置的 Dot Net Core 3.1/React.js (typescript) 项目中使用 JWT 进行身份验证。我正在使用跨站点请求。我的 React 服务器正在通信 https://localhost:3000 (使用 Visual Studio Code 进行开发)，以及我的 API/后端，API 服务器正在 https://localhost:44309 上运行在 Visual Studio 中运行。

我正在尝试将刷新 token 发送回客户端，指南指出这需要位于 HTTP Only cookie 中以缓解 XSS。无论我尝试什么，我都无法让浏览器在客户端执行“set-cookie”，因此我可以在 Google Chrome 的开发工具 > 应用程序 > Cookies 中看到它。这适用于我在响应中设置的任何 cookie。如果我使用 Google Chrome 的开发者工具面板，在网络响应中我可以看到“set-cookie” header 在那里，但它们从未显示在“应用程序 > Cookies > LocalHost”中。我发送的响应发送有效载荷，可以毫无问题地使用/读取。它只是不会设置 cookie!

当我为客户端和服务器应用程序部分使用相同的服务器时，设置工作正常(只需在标准 Visual Studio 设置的 IIS 中运行它)；任何/所有 cookie 设置都没有问题，所以我猜我正在处理跨站点问题。我只是不知道如何修复它。

我的代码:

//setting up cors
services.AddCors(options =>
{
  options.AddPolicy("CORSAllowLocalHost3000",
    builder =>
    builder.WithOrigins("https://localhost:3000")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials()
   );
});

//using cors
app.UseCors("CORSAllowLocalHost3000");


//setting up auth
services
.AddDefaultIdentity<ApplicationUser>
  (
    options =>
    {
      options.SignIn.RequireConfirmedAccount = false;
      options.Password.RequiredLength = 6;
    }
  )
.AddEntityFrameworkStores<IdentityApplicationContext>();


services
.AddAuthentication(opts =>
{
  opts.DefaultAuthenticateScheme = "JwtBearer";
  opts.DefaultScheme = "JwtBearer";
  opts.DefaultChallengeScheme = "JwtBearer";

})

.AddJwtBearer("JwtBearer", opts =>
{
  opts.SaveToken = true;
  opts.TokenValidationParameters = tokenValParams;
});

//tokenValParams to validate the JWT
var tokenValParams = new TokenValidationParameters
{
  ValidateIssuerSigningKey = true,
  IssuerSigningKey = new SymmetricSecurityKey(key:  
Encoding.ASCII.GetBytes(configuration.GetSection("Authentication").GetSection("JwtBearer").GetSection("SecurityKey").Value)),
  ValidateIssuer = false,
  ValidateAudience = false,
  RequireExpirationTime = false,
  ValidateLifetime = true,
  ClockSkew = TimeSpan.Zero
};


//for API only dev env, start as API only service - no browser - client app runs 
app.UseStaticFiles();
if (!env.IsEnvironment("APIOnlyDevelopment")) 
  app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
  spa.Options.SourcePath = "ClientApp";
  if (env.IsDevelopment())
    {
      spa.UseReactDevelopmentServer(npmScript: "start");
       //spa.UseProxyToSpaDevelopmentServer("https://localhost:3000");  
     });


//Test Cookie generated in client before async Ok() result is returned in controller
HttpContext.Response.Cookies.Append("JwtRefreshTokenn", resultOfSignin.RefreshToken, new CookieOptions() { Secure = true, HttpOnly = true, SameSite = SameSiteMode.None});

Response.Cookies.Append("JwtRefreshTokenn2", resultOfSignin.RefreshToken, new CookieOptions() { HttpOnly = true, Secure = true, SameSite = SameSiteMode.None});

Response.Cookies.Append("JwtRefreshTokenn3", resultOfSignin.RefreshToken, new CookieOptions() { });

更多信息:

• 我已将 Visual Studio 中的“应用程序 URL”更改为“启用 SSL”URL，因为我在发生重定向时遇到 CORS 问题。
• 我正在使用内置的“HTTPS”设置运行服务器，并使用 npm 的 https 设置运行客户端
  (包括像 this post 一样排除证书错误)。
• 我已经尝试了 cookie 选项的所有组合，包括添加域/路径(以及同一站点属性的所有变体)
• 我在 CORS 策略中尝试过不同的东西(例如省略 .AllowCredentials)
• 我试过使用 http 而不是 https
• 对于 Google Chrome 没有的请求，Firefox 仍然存在 CORS 问题
• 问题反射(reflect)在 MS Edge 中
• 全部在 Windows 10 中运行
• 我对此比较陌生，所以如果我遗漏了什么，请告诉我。

非常感谢任何帮助。非常感谢，保罗

Answer 1

在为此投入了好几个小时之后，这是一个客户需要的简单修复。上面的设置是/很好并且工作正常，特别提到这一点:

services.AddCors(options =>
{
  options.AddPolicy("CORSAllowLocalHost3000",
    builder =>
    builder.WithOrigins("https://localhost:3000")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials() // <<< this is required for cookies to be set on the client - sets the 'Access-Control-Allow-Credentials' to true
   );
});

由于客户端正在使用 axios 从 React 中进行 API 调用，因此需要设置全局默认值以匹配此/与此 header 一起使用。所以至少在程序中导入axios的地方，默认是这样设置的:

import axios from 'axios';
axios.defaults.withCredentials = true;

我有一个自定义的 axios creator 文件设置，这样我就可以使用例如拦截器等，这是我放置这段代码的地方。添加并对齐这两件事后，将设置 cookie。

希望对您有所帮助。