CORS Cookie未保存在浏览器中

时间:2019-06-21 14:39:54

标签: http cookies browser cors credentials

我在auth.app.loc上有一个node.js身份验证api,在app.loc上有一个next.js前端(反应),而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})
});

以及docker容器中的反向代理配置(nginx)。

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主机文件将app.loc auth.app.loc解析为我的IP:192.168.0.248

现在,通过fetch从react应用发出请求会导致: screenshot from chrome

但是在邮递员中发出相同的请求(通过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通过

screenshot from postman

为什么使用提取时未应用set-cookie标头?

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

@edit

通过http://192.168.0.248:3000/ URL访问前端,并将获取URL更改为http://192.168.0.248:5000/cookie可以正常工作。 Cookie通过了。但是,为什么领域方法不起作用? cookie getting passed

2 个答案:

答案 0 :(得分:0)

不可能...

我想快速调试它,但没有填写 cookie设置部分。似乎,如果没有它,cookie甚至将不会保存在浏览器中,但对于邮递员来说并不是问题。

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

答案 1 :(得分:0)

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

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