如何使用跨域 cookie 进行服务器端渲染？答案

【问题标题】：How to use cross-origin cookies for server-side rendering?如何使用跨域 cookie 进行服务器端渲染？
【发布时间】：2019-05-26 05:15:55
【问题描述】：

我有一个在localhost:3000 上运行的服务器端呈现的Web 应用程序和localhost:3010 上的API。向 API 发出请求后，如何在两个域上设置相同的 cookie？

当我登录时，我正在向localhost:3010 发送一个 POST 请求，它正在设置这样的 cookie：

const token = jwt.sign({ id, email }, secret, { expiresIn });
res.cookie('authorization', token, { signed: true, httpOnly: true, maxAge: 10000000 });

我的问题是我不知道如何在 localhost:3000 的应用程序上设置该 cookie。我之前只是使用 localStorage，但是当我的 API 和应用程序位于不同的域时，它不适用于服务器端渲染。

这是我在localhost:3000 上的服务器端渲染中间件的样子，试图访问所说的 cookie：

import Cookies from 'universal-cookie';

export function serverSideRendering(req, res, next) {
  const cookies = new Cookies(req.headers.cookie);
  const token = cookies.get('authorization');
  // ...
}

【问题讨论】：

不确定你的堆栈，一般来说，我解决了这个问题，添加了一个代理，将资源组合在一起，并在不同路径的同一来源呈现/服务。 IE。如果你有一个 docker compose 堆栈，你可以添加一个 nginx 层，其中包含对其他两个容器和一个配置的引用，如果你认为值得尝试，我会尽快写一个正确的答案:)

标签： javascript node.js reactjs server-side-rendering

【解决方案1】：

尝试将属性名“authorization”改为“JWT-token”；

res.cookie('JWT-token', token, { signed: true, httpOnly: true, maxAge: 10000000 });

或者你可以试试原生nodejs方法；

res.writeHead(200, {
  'Set-Cookie': 'authorization='+token,
});

我的建议是，不要使用 cookie，使用标题字段。它可以帮助您将来将您的应用扩展到 ios 和 android 应用。

您可以将令牌保存在应用程序的存储中，这样更安全。

【讨论】：

实际的 cookie 从请求发送回 API，我只是不知道如何在呈现应用程序的其他服务器上也设置它：media.giphy.com/media/1zKQ1LT3LtIcCU4TXw/giphy.gif
用native方法添加cookie也是一样的结果？
我建议您在开发工具中使用 cookie 使用存储选项卡
我明白你的意思。我尝试设置 cookie 的原因是因为我希望服务器在每次浏览器发送请求时都使用令牌。一旦加载了 JS 包，我就可以将它放在标题中，但在那之前我不能，所以我想弄清楚如何从 cors 请求中设置 cookie。我的客户从app.com 请求网站并从api.com 登录，所以cookie 成功设置为api.com，我只需要弄清楚如何为app.com 设置它，也许我需要做一个代理请求什么的。
是的，只是在 nginx 中代理