在localhost上的多个应用程序之间共享cookie

Question

我的API(localhost:8080)为我的前端发出cookie (localhost:3000).在开发模式下,cookie域设置为"NULL".

我在旁边有另一个小前端(localhost:9000).它将被部署为生产中前端的子域,所以我不应该有问题.

在开发中,我发现没有办法从我的小前端请求API,我没有CORS问题,但我的API抛出401因为小前端没有发送cookie."Send For"属性设置为"Any type of connection".Cookie将在一年后过期.我检查了浏览器设置,在两个端口上cookie都有相同的设置和内容.

在小前端,我可以列出document.cookie上的cookie,但尝试使用其中任何一个从cookie中检索任何值

function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}
getCookie('sid');

要么

$.cookie('sid');

不行.

将cookie域设置为NULL不起作用.将cookie域设置为localhost也不起作用,并且chrome不支持它.(见这个)FF支持它,但我有同样的问题

我试图将cookie域设置为".app.localhost",然后在/ etc/hosts中设置

127.0.0.1:8080 api.app.localhost
127.0.0.1:9000 app.app.localhost
127.0.0.1:3000 front.app.localhost

但我无法访问我的应用程序.我想我在这里错过了一些大事.

编辑:

关于/ etc/hosts文件

经过一番挖掘后,我发现无法在ips上指定端口

但是,您可以这样设置:

127.0.0.1 api.app.localhost:8080
127.0.0.1 app.app.localhost:3000
127.0.0.1 app2.app.localhost:9000

我可以访问并登录我的app.app.localhost:3000并将cookie设置为.app.localhost,当我转到app.app.localhost:9000我可以看到有一个cookie包含我的sessionId设置.app.localhost作为域和Any kind of connection.

然而,与上面解释的相同的问题.