如何通过Shopify CLI调用API获取产品并解决URLSearchParams报错

核心报错根因 #

• 前端运行环境（低版本浏览器、未配置对应polyfill的前端构建产物）不支持原生URLSearchParams，触发未定义识别错误
• 前后端代码存在多处语法逻辑错误，会直接阻断请求全流程
  注意：Node.js服务端环境原生支持URLSearchParams，不会触发该类报错，该类报错只会出现在低版本浏览器的前端运行场景中

前端页面（index.js）修正 #

原有代码存在两处影响功能的问题：

• 定义的product异步函数仅做了声明，没有在按钮点击事件中实际调用，点击按钮只会打印日志，不会发起拉取请求
• 直接依赖URLSearchParams拼接参数，在不支持该API的环境下会直接报错

修正后的可运行代码：

import { Page } from "@shopify/polaris";

const Index = () => {
  // 封装拉取逻辑，绑定到按钮点击事件
  const handleFetchProducts = async () => {
    console.log('正在拉取产品数据');
    const limit = 10;
    const sinceId = '0,921728736';
    // 手动拼接查询参数，完全避开URLSearchParams的兼容问题
    const queryStr = `limit=${limit}&since_id=${sinceId}`;
    try {
      const res = await fetch(`/products?${queryStr}`);
      const productList = await res.json();
      console.log('拉取到的产品数据：', productList);
    } catch (err) {
      console.error('请求异常：', err);
    }
  };

  return (
    <Page
      title='Trustpilot Aggreggation Uploader'
      primaryAction={{
        content: 'Update Metafields',
        onAction: handleFetchProducts
      }}
    />
  );
};

export default Index;

调整要点：

• 把请求逻辑直接绑定到按钮的点击回调，确保用户操作可以实际触发请求
• 不依赖URLSearchParams手动拼接查询参数，从根源消除前端环境的兼容报错，参数传递效果完全一致

后端服务（server.js）修正 #

原有代码存在三处影响功能的问题：

• 拼接Shopify API地址时用单引号包裹模板字符串，占位变量不会被实际替换，生成的请求地址是无效的
• 鉴权方式不符合Shopify REST API规范，不能把API密钥、访问令牌明文拼在URL路径里
• 打印错误日志时用单引号包裹模板字符串，无法输出实际的错误内容

修正后的/products路由代码：

router.get("/products", verifyRequest(), async (ctx) => {
  try {
    const { shop, accessToken } = ctx.session;
    // 后端运行在Node环境，原生支持URLSearchParams，不存在兼容问题
    const queryStr = new URLSearchParams(ctx.request.query).toString();
    // 按API规范通过请求头传递鉴权信息
    const res = await fetch(
      `https://${shop}/admin/api/2020-10/products.json?${queryStr}`,
      {
        headers: {
          "X-Shopify-Access-Token": accessToken,
          "Content-Type": "application/json"
        }
      }
    );
    ctx.body = await res.json();
    ctx.status = 200;
  } catch (error) {
    console.log(`处理产品请求失败: ${error}`);
    ctx.status = 500;
  }
});

调整要点：

• 给产品接口加上登录态校验，避免未授权的跨域请求调用
• 替换为Shopify官方要求的鉴权头，符合API调用安全规范
• 所有带变量的字符串统一使用反引号包裹，确保地址、日志中的变量可以正常替换

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