Angular + Spring 启动 - 无法通过 HTTPS 发送 cookie
Angular + Spring Boot - Can't send cookies over HTTPS
我有一个 Angular 12 前端应用程序与一个 Spring 引导后端应用程序通信。应调用 API 使用 cookie 传递 CSRF 令牌,但似乎我的逻辑仅适用于本地主机。
请查找以下代码片段:
- Angular 通过 ngx-cookie-service 设置的 cookie:
this.cookieService.set(key, value, {
secure: environment.apiHost.startsWith('https'),
sameSite: environment.apiHost.startsWith('https') ? 'None' : undefined
});
- Angular 每个请求前调用的拦截器:
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// Handle cookies
request = request.clone({
withCredentials: true
});
return next.handle(request).pipe(
...
);
}
- Spring Boot CORS 通用配置:
List<String> allowedOrigins = new ArrayList<>();
allowedOrigins.add("http://localhost:4200");
allowedOrigins.add("https://<host_name_not_localhost>");
config.setAllowCredentials(true);
config.setAllowedOrigins(allowedOrigins);
config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept"));
config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH"));
source.registerCorsConfiguration("/api/**", config);
return new CorsFilter(source);
老实说,我不明白问题出在前端还是后端......同样,通过 HTTP(本地主机)发送 cookie 工作正常,而 Cookie 调试通过 HTTPS 调用时不显示属性。
你对此有什么建议吗?
提前致谢。
这里的唯一原因可能是在创建 cookie 时您没有使用后端域设置域。你可以这样做
var cookieName = 'HelloWorld';
var cookieValue = 'HelloWorld';
var myDate = new Date();
myDate.setMonth(myDate.getMonth() + 12);
document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate
+ ";domain=.example.com;path=/";
在上面的例子中,example.com 是您的后端域。或者通过使用 cookies api,参考这里:- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API
我决定摆脱 cookie 并在请求中传递信息 header,这似乎是一种更安全的方法。另外,我可以从 back-end 本身控制允许的 header。
我有一个 Angular 12 前端应用程序与一个 Spring 引导后端应用程序通信。应调用 API 使用 cookie 传递 CSRF 令牌,但似乎我的逻辑仅适用于本地主机。
请查找以下代码片段:
- Angular 通过 ngx-cookie-service 设置的 cookie:
this.cookieService.set(key, value, {
secure: environment.apiHost.startsWith('https'),
sameSite: environment.apiHost.startsWith('https') ? 'None' : undefined
});
- Angular 每个请求前调用的拦截器:
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// Handle cookies
request = request.clone({
withCredentials: true
});
return next.handle(request).pipe(
...
);
}
- Spring Boot CORS 通用配置:
List<String> allowedOrigins = new ArrayList<>();
allowedOrigins.add("http://localhost:4200");
allowedOrigins.add("https://<host_name_not_localhost>");
config.setAllowCredentials(true);
config.setAllowedOrigins(allowedOrigins);
config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept"));
config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH"));
source.registerCorsConfiguration("/api/**", config);
return new CorsFilter(source);
老实说,我不明白问题出在前端还是后端......同样,通过 HTTP(本地主机)发送 cookie 工作正常,而 Cookie 调试通过 HTTPS 调用时不显示属性。
你对此有什么建议吗?
提前致谢。
这里的唯一原因可能是在创建 cookie 时您没有使用后端域设置域。你可以这样做
var cookieName = 'HelloWorld';
var cookieValue = 'HelloWorld';
var myDate = new Date();
myDate.setMonth(myDate.getMonth() + 12);
document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate
+ ";domain=.example.com;path=/";
在上面的例子中,example.com 是您的后端域。或者通过使用 cookies api,参考这里:- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API
我决定摆脱 cookie 并在请求中传递信息 header,这似乎是一种更安全的方法。另外,我可以从 back-end 本身控制允许的 header。