CORS Cookie 未保存在浏览器中

Question

我有一个 node.js auth api 在 auth.app.loc 上服务，一个前端 next.js(react) 在 app.loc 上服务，nginx 充当反向代理。

我发出的任何请求都会成功解决，除了 cookie 不是从服务器发送的。

这是我的 auth 服务总结。在 docker 容器中的端口 5000 上提供服务。

fastify.register(require('fastify-cookie'));
fastify.register(require('fastify-cors'), { 
  origin: ['http://app.loc', 'http://192.168.0.248:3000'],
  credentials: true,
});

fastify.post('/cookie', async (req, res) => {
  res.setCookie('foo', 'foo');
  res.header('bar', 'bar');
  res.code(204);
});

这是我的前端片段。在 docker 容器中的端口 3000 上提供服务。

const response = await fetch('http://auth.app.loc/cookie', {
  method: 'post',
  headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
  },
  credentials: 'include',
  body: JSON.stringify({login, password})
});

和 reverse-proxy 配置 (nginx)，也在 docker 容器中。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        server_name app.loc;
        listen 80;
        location / {
            proxy_pass http://192.168.0.248:3000;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

    server {
        server_name auth.app.loc;
        listen 80;
        location / {
            proxy_pass http://192.168.0.248:5000;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

Windows hosts 文件解析 app.loc auth.app.loc 到我的 ip: 192.168.0.248

现在，通过 fetch 从 React 应用发出请求会导致：

但是在 Postman 中发出相同的请求（通过 chrome 开发工具复制为 curl bash）：

curl 'http://auth.app.loc/cookie' -H 'Accept: application/json, text/plain, */*' -H 'Referer: http://app.loc/signin' -H 'Origin: http://app.loc' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36' -H 'Content-Type: application/json' --data-binary '{"login":"login","password":"password"}' --compressed --insecure

导致 set-cookie 通过

为什么在使用fetch时没有应用set-cookie header？

我很确定它与 fetch 有关，但我已经在使用 credentials: 'include'

@edit

通过 http://192.168.0.248:3000/ url 访问前端并将获取 url 更改为 http://192.168.0.248:5000/cookie 没有问题。饼干正在通过。但为什么域方法不起作用？

Answer 1

不可能...

我想快速调试它，但我没有填写 cookie 设置 的域部分。看起来，如果没有它，cookie 甚至不会保存在浏览器中，但这对 Postman 来说不是问题。

  res.setCookie('foo', 'foo', {
    domain: '.app.loc' //saves everything
  });

Answer 2

当我发送 cookie 并在浏览器中接收它们但浏览器从未应用它们时，我遇到了同样的问题。我发现我缺少路径参数。所以下面的代码对我有用。

res.setCookie( "authorization", token, { 
    maxAge: 1000 * 60 * 60 * 24, 
    path: "/",
    httpOnly: true, 
})

CORS Cookie 未保存在浏览器中

CORS Cookies not getting saved in the browser

browser

cookies

http

credentials

cross-domain