小编All*_*ney的帖子

我挑战的背景

我正在建立一个无头的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); …

我正在尝试做的事情：

在我的网站上，我创建了一个注册表单，我希望在提交时执行两个操作：

1) 为用户订阅 MailChimp EDM 列表（仅使用姓名、电子邮件字段）。

2）通过执行 POST 操作（所有字段，特别是它们的消息）将完整的表单存储在 Netlify 中

这是我的表格：

<form
  className={`contact-form ${submitError ? 'has-error' : ''}`}
  name={formName}
  method="POST"
  onSubmit={event => this.submitHandler(event)}
  action="/thank-you/"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
   // Form fields
</form>

这是我的 onSubmit 处理程序：

submitHandler = async (event) => {
  const {
    email,
    fieldValues,
    submitting,
  } = this.state;
  if (submitting) return false;
  this.setState({
    submitting: true,
    submitError: false,
  });
  const result = await addToMailchimp(email, fieldValues);
  if (result.result === 'success') {
    // Inconsequential, as success should result in redirection to …