使用Axios调用Shopify Storefront API出现参数/解析错误如何解决

问题根因与解决方案 #

1. 解析错误"Parse error on "shop" (IDENTIFIER) at [2, 11]"

核心原因：你修改后的代码中，GraphQL查询语句缺少query关键字声明和外层包裹的大括号，不符合GraphQL语法规范
修复后的完整请求代码如下：

const url = 'https://<你的店铺名>.myshopify.com/api/2021-07/graphql.json'
const headers = {
  'X-Shopify-Storefront-Access-Token': '<你的Storefront访问令牌>',
  'Content-Type': 'application/json',
}

await axios.post(
  url,
  {
    // 补全完整的GraphQL查询结构
    query: `query {
      shop {
        name
      }
    }`,
    variables: {}
  },
  {headers: headers}
)
.then((result) => console.log(result.data))
.catch((error) => {
  console.log(error.response?.data || error);
});

2. 400错误"Parameters missing or invalid"

如果修复查询语法后仍然返回400错误，按以下顺序排查：

• 确认占位符替换正确：<店铺名>、<Storefront访问令牌>不要保留尖括号，确认令牌是Storefront API专属令牌，不是Admin API令牌
• 确认令牌权限：在Shopify后台给该令牌开通unauthenticated_read_shop_settings等基础未授权访问权限
• 确认CORS配置：将你当前的前端域名（本地调试需包含http://localhost:对应端口）添加到Shopify后台对应应用的允许跨域访问列表中
• 不要手动对请求体做JSON.stringify处理，axios会自动将对象转换为符合要求的JSON格式，手动处理可能引入转义问题
• 建议将API版本更换为当前仍在支持的稳定版本（如2024-07），避免旧版本停用导致的报错

可选简化方案（基于你项目已引入的Shopify Buy SDK）

不需要手动封装Axios请求，直接调用SDK内置方法即可，大幅降低出错概率：

import Client from '@shopify/buy-button-js';

const client = Client.buildClient({
  domain: '<你的店铺名>.myshopify.com',
  storefrontAccessToken: '<你的Storefront访问令牌>',
  apiVersion: '2024-07'
});

// 直接获取店铺信息
client.shop.fetchInfo().then(shop => {
  console.log(shop.name);
});

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