如何设置从服务器发送到不同端口上的客户端的 cookie答案

【问题标题】：How set cookie sent from server to a client on a different port如何设置从服务器发送到不同端口上的客户端的 cookie
【发布时间】：2020-10-21 22:47:00
【问题描述】：

我有一个后端服务器（由 Rails 提供支持），其 API 由运行在 Node 简单开发服务器上的 HTML5 前端使用。

两者都在同一个主机上：我的机器。

当我从前端登录到后端时，rails 向我发送了会话 cookie。我可以在响应头中看到它，问题是浏览器不保存它。

策略是正确的，如果我直接从 rails 应用程序 cookie 提供相同的前端，则设置正确。

我能看到的唯一区别是，当前端在 Node 服务器上运行时，它运行在端口 8080 上，而 rails 运行在端口 3000 上。我知道 cookie 不应该是特定于端口的，所以我错过了这里发生的事情。

有什么想法吗？解决方案？

（我需要能够以这种方式保持设置，以便让前端从 Node 提供服务，后端在不同端口上的轨道上提供服务）

【问题讨论】：

使用基于 JWT 令牌的身份验证系统，而不是 cookie/会话。如Knock或devise_token_auth。
JWT 与问题完全正交。是的，可以通过Authorization 标头而不是通过 cookie 发送 JWT，但 OP 的当前身份验证令牌也可以。 Cookie 是一种便利。

【解决方案1】：

你说得对，cookie 与端口无关，并且浏览器会将与 myapp.local:8080 相同的 cookie 发送到 myapp.local:3000--除了不是通过 XMLHttpRequest（XHR， a.k.a.，AJAX）在执行跨站点请求 (CORS) 时。

解决方案：可以通过在任何 XMLHttpRequest 对象上将 withCredentials 设置为 true 来告知请求包含 cookie 和 auth 标头。见：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

或者，如果使用 Fetch API，请设置选项 credentials: 'include'。见：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

替代方案：由于您在问题中标记了 webpack-dev-server，您可能有兴趣通过 webpack-dev-server 将请求代理到 Rails API 以避免任何 CORS 问题地方。这是在您的 webback.config 中完成的：

proxy: {
  '/some/path': {
    target: 'https://other-server.example.com',
    secure: false
  }
}

【讨论】：