Shopify主题扩展调用认证API遭遇404错误求助

核心问题原因 #

• 主题扩展部署在Shopify CDN上，和你的App web前端（本地/自有服务器）是完全隔离的环境，无法直接导入App内部的useAppQuery等钩子文件，这就是你看到404错误的根本原因。
• App的/api/products/count接口依赖res.locals.shopify.session做身份验证，主题扩展里没有这个会话上下文，直接调用会被拒绝。

具体解决步骤 #

1. 给API接口添加主题扩展兼容的认证逻辑 #

修改web/index.js中的API接口，支持通过App Proxy（安全度更高）进行认证，替代原有的仅App内部会话认证：

app.get("/api/products/count", async (req, res) => {
  // 新增：处理App Proxy的请求认证
  if (req.query.shop) {
    // 通过shop参数加载会话，或使用Shopify官方的App Proxy签名验证（更安全）
    const session = await shopify.session.loadCurrentSession(req, res);
    if (!session) {
      return res.status(401).send("Unauthorized");
    }
    const countData = await shopify.api.rest.Product.count({ session });
    return res.status(200).send(countData);
  }
  // 保留原有的App内部调用逻辑
  const countData = await shopify.api.rest.Product.count({
    session: res.locals.shopify.session,
  });
  res.status(200).send(countData);
});

2. 在主题扩展中实现独立的请求逻辑 #

主题扩展不能复用App的钩子，需要自己实现带认证的请求：

• 先在Shopify Partner后台的App设置中配置App Proxy：设置Proxy URL为你的App服务器地址，Proxy path prefix设为apps/your-app-name（比如apps/product-counter）。
• 在主题扩展中编写请求函数，通过App Proxy访问API：

// 主题扩展中的产品计数请求函数
export const getProductCount = async () => {
  try {
    // 替换为你的App Proxy路径
    const proxyUrl = `/apps/product-counter/api/products/count?shop=${window.Shopify.shop}`;
    const response = await fetch(proxyUrl, {
      method: "GET",
      credentials: "include", // 携带Shopify店铺的会话Cookie
    });
    if (!response.ok) throw new Error("API请求失败");
    return await response.json();
  } catch (error) {
    console.error("获取产品数量失败：", error);
    return null;
  }
};

3. 修复React Hook使用错误 #

你当前的getProductCount函数直接调用useAppQuery是违规的，React Hook只能在组件顶层调用，不能在普通函数内使用。如果是在主题扩展的React组件中使用，正确写法如下：

import { useState } from 'react';

export const ProductCountCheckbox = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [productCount, setProductCount] = useState(null);

  const handleCheckboxChange = async () => {
    setIsLoading(true);
    const data = await getProductCount();
    setProductCount(data?.count);
    setIsLoading(false);
  };

  return (
    <label>
      <input 
        type="checkbox" 
        onChange={handleCheckboxChange} 
        disabled={isLoading}
      />
      {isLoading ? '加载中...' : productCount ? `产品总数：${productCount}` : '点击获取数量'}
    </label>
  );
};

4. 验证App Proxy配置 #

登录Shopify Partner后台，进入你的App -> App setup -> App proxy：

• 确认Proxy URL指向你的App服务器的API根路径（比如https://your-app-domain.com/api）
• 确认Proxy path prefix和你代码中使用的一致
• 保存后，Shopify会自动处理请求转发和签名验证，确保只有合法店铺的请求能访问你的API

内容的提问来源于stack exchange，提问作者main55