在同一域上的站点之间共享 cookie - Headless / Decoupled CMS答案

【问题标题】：Sharing cookies between sites on the same domain - Headless / Decoupled CMS在同一域上的站点之间共享 cookie - Headless / Decoupled CMS
【发布时间】：2018-12-20 18:56:03
【问题描述】：

我的挑战背景

我正在建立一个无头 WordPress / WooCommerce 商店。

如果您不熟悉无头 CMS 的概念，我会通过 WordPress/WooCommerce REST API 提取商店的内容（产品及其图像、文本）。通过这种方式，我可以为我的客户受益于 CMS 仪表板，同时我可以使用现代语言/库进行开发，就我而言 - React！

如果可能的话，我想在 WordPress/WooCommerce/PHP 中保留结帐。根据我应用此代码/样板的项目，我怀疑我将不得不削减和更改支付网关，并且在 PHP/WordPress 中使这种安全和 PCI 兼容会更容易 - 有很多插件可以用于此。

这意味着整个商店/前端都将存在于 React 中，但购物车除外，当用户希望完成订单时，他们将在购物车中被重定向到 CMS 前端（WordPress、PHP）。

挑战

这使得管理会话的 cookie 变得相当不直观和不正统。当用户从商店（React 站点）重定向到结帐（WooCommerce/PHP 站点）时，购物车会话必须在两个站点之间持续存在。

此外，对 WooCommerce 的请求通过我的 React 客户端所在的 Node/Express 服务器进行路由。我这样做是因为我想隐藏 WordPress 地址，因此我可以应用 GraphQL 来清理我的请求和响应。这个问题是在这个过程中，cookie 丢失了，因为我的客户端和我的 CMS 通过中间人（我的节点服务器）进行通信 - 我需要额外的逻辑来手动管理我的 cookie。

守则

当我尝试从动作创建者（我使用 Redux 进行状态管理）向购物车添加东西时，我点击了我的 Node/Express 服务器上的 api 对应端点：

export const addToCart = (productId, quantity) => async (dispatch) => {
  dispatch({type: ADD_TO_CART});
  try {
    // Manually append cookies somewhere here
    const payload = await axios.get(`${ROOT_API}/addtocart?productId=${productId}&quantity=${quantity}`, {
      withCredentials: true
    });
    dispatch(addToSuccess(payload));
  } catch (error) {
    dispatch(addToCartFailure(error));
  }
};

然后在 Node/Express 服务器上我向 WooCommerce 发出请求：

app.get('/api/addtocart', async (req, res) => {
    try {
      // Manually retrieve & append cookies somewhere here
      const productId = parseInt(req.query.productId);
      const quantity = parseInt(req.query.quantity);
      const response = await axios.post(`${WP_API}/wc/v2/cart/add`, {
        product_id: productId,
        quantity
      });
      return res.json(response.data);
    } catch (error) {
      // Handle error
      return res.json(error);
    }
});

【问题讨论】：

您是否尝试在您的wp-config.php 中设置define( 'COOKIE_DOMAIN', 'somedomain.com' );，这将确保wordpress 在主域而不是子域中生成cookie，并且它们都将与任何额外的cookie 共享，所以没有代码像你现在这样的复杂性
感谢@TarunLalwani 的提示-我还没有尝试过，我会试一试！如果这能解决我所有的饼干问题，那就太棒了。我最初的犹豫是 A) WooCommerce 是否会遵守此选项，以及 B) 从 React 到 WordPress 的所有 REST API 调用都是在服务器端（节点, express），而不是客户端（react）。我想这会妨碍 axios（我的 http 客户端）自动将相关的浏览器 cookie 添加到我发送到 WordPress 的请求中
A) 可以消除 - 我发现开发人员确认：“WooCommerce 使用与 WordPress 相同的 cookie 设置（例如 WordPress 登录 cookie）”
对于 B，您需要将您的请求中的所有浏览器 cookie 发送到 WP，并为返回 cookie 做同样的事情
你是对的，我必须在访问 CMS（WooCommerce via REST）之前将我的 cookie 从客户端（React）传递到服务器（Node），然后以相反的方式设置来自节点服务器内的客户端的 cookie。这很复杂，但它几乎就在那里！

标签： wordpress reactjs express cookies axios

【解决方案1】：

借助@TarunLalwani 在他的 cmets 中提供的线索（感谢一百万！），我设法制定了解决方案。

Cookie 域设置

由于我在使用两个单独的站点，为了使这个工作能够正常工作，我必须确保它们都在同一个域中，并且在所有 cookie 中都设置了域。这确保了 cookie 包含在我在 Node / Express 服务器（例如，somedomain.com）和 WooCommerce CMS（例如，wp.somedomain.com）之间的请求中，而不是 wp.somedomain 子域独有的。这是通过在我的 CMS 上的 wp-config.php 中设置 define( 'COOKIE_DOMAIN', 'somedomain.com' ); 来实现的。

手动获取和设置 Cookies

我的代码需要大量额外的逻辑，以便在请求通过客户端通过我的 Node / Express 服务器路由时包含 cookie。

在 React 中，我必须检查 cookie 是否存在，如果存在，我必须在 GET 请求的标头中将其发送到 Node / Express 服务器。

import Cookies from 'js-cookie';

export const getSessionData = () => {
  // WooCommerce session cookies are appended with a random hash.
  // Here I am tracking down the key of the session cookie.
  const cookies = Cookies.get();
  if (cookies) {
    const cookieKeys = Object.keys(cookies);
    for (const key of cookieKeys) {
      if (key.includes('wp_woocommerce_session_')) {
        return `${key}=${Cookies.get(key)};`;
      }
    }
  }
  return false;
};

export const addToCart = (productId, quantity) => async (dispatch) => {
  dispatch({type: ADD_TO_CART});
  const sessionData = getSessionData();
  const config = {};
  if (sessionData) config['session-data'] = sessionData;
  console.log('config', config);
  try {
    const payload = await axios.get(`${ROOT_API}/addtocart?productId=${productId}&quantity=${quantity}`, {
      withCredentials: true,
      headers: config
    });
    dispatch(addToSuccess(payload));
  } catch (error) {
    dispatch(addToCartFailure(error));
  }
};

在 Node / Express 服务器上，我必须检查我是否包含来自客户端的 cookie（保存在 req.headers 中，密钥为 session-data - 在此处使用 Cookie 作为密钥是非法的），并且如果我这样做了，请将其附加到我的 CMS 请求的标题中。

如果我没有找到附加的 cookie，这意味着这是会话中的第一个请求，所以我必须从我从 CMS 返回的响应中手动获取 cookie 并将其保存到客户端 (@987654332 @)。

app.get('/api/addtocart', async (req, res) => {
  try {
    const productId = parseInt(req.query.productId);
    const quantity = parseInt(req.query.quantity);
    const sessionData = req.headers['session-data'];
    const headers = {};
    if (sessionData) headers.Cookie = sessionData;
    const response = await axios.post(`${WP_API}/wc/v2/cart/add`, {
      product_id: productId,
      quantity
    }, { headers });
    if (!sessionData) {
      const cookies = response.headers['set-cookie'];
      const setCookieFunc = (cookie) => {
        const [cookieKeyValue, ...cookieOptionsArr] = cookie.split('; ');
        const cookieKey = cookieKeyValue.split('=')[0];
        const cookieValue = decodeURIComponent(cookieKeyValue.split('=')[1]);
        const cookieOptions = { };
        cookieOptionsArr.forEach(option => (cookieOptions[option.split('=')[0]] = option.split('=')[1]));
        if (cookieOptions.expires) {
          const expires = new Date(cookieOptions.expires);
          cookieOptions.expires = expires;
        }
        res.cookie(cookieKey, cookieValue, cookieOptions);
      };
      cookies.map(cookie => setCookieFunc(cookie));
    }
    return res.json(response.data);
  } catch (error) {
    // Handle error
    return res.json(error);
  }
});

我不确定这是否是解决问题的最优雅的方法，但它对我有用。

备注

我使用 js-cookie 库与我的 React 客户端上的 cookie 进行交互。

陷阱

如果您尝试在您的开发环境（使用本地主机）中完成这项工作，则需要完成一些额外的工作。见Cookies on localhost with explicit domain

【讨论】：