Shopify Storefront GraphQL 403 Forbidden问题排查求助

以下是针对你遇到问题的排查和修复步骤：

1. 修复GraphQL查询语法错误 #

你的查询直接通过模板字符串插入变量，未给字符串值添加引号，这会导致GraphQL语法错误，进而可能触发403或其他异常。修改查询，给所有字符串字段值加上双引号：

const shopifyUserQuery = `mutation  {
    customerCreate(
      input: {
        firstName: "${values.firstName}",
        lastName: "${values.lastName}",
        email: "${values.email}",
        password: "${values.password}"  
      }
    ) {
      customer {
        id,
        firstName,
        lastName,
        email,
      }
      customerUserErrors {
        field,
        message,
      }
      customer {
        id
      }
    }
  }`

更规范的做法是使用GraphQL变量，避免字符串拼接带来的语法和安全问题：

const shopifyUserQuery = `mutation CustomerCreate($input: CustomerCreateInput!) {
    customerCreate(input: $input) {
      customer {
        id,
        firstName,
        lastName,
        email,
      }
      customerUserErrors {
        field,
        message,
      }
    }
  }`

// 调用时传递变量
const shopifyUser = await fetch(process.env.SHOPIFY_SF_API_URL, {
    body: JSON.stringify({
      query: shopifyUserQuery,
      variables: {
        input: {
          firstName: values.firstName,
          lastName: values.lastName,
          email: values.email,
          password: values.password
        }
      }
    }),
    method: 'post',
    headers: {
      'X-Shopify-Access-Token': process.env.SHOPIFY_SF_API_ACCESS_TOKEN,
      'Content-Type': 'application/json',
    },
  }).then(async (sres) => {
    console.log(await sres.json()); // 打印完整响应内容，获取具体错误信息
    return sres;
  })

2. 验证Storefront Access Token权限 #

确认你的Storefront Access Token拥有unauthenticated_write_customers权限：

• 进入Shopify后台的应用管理页面，找到你的自定义应用
• 查看Storefront API权限，确保已勾选unauthenticated_write_customers（用于未登录状态下创建顾客）

3. 检查商店顾客账户设置 #

在Shopify后台进入设置 > 顾客账户：

• 确保“顾客账户类型”设置为顾客可以创建账户或顾客可以创建账户并登录
• 如果设置为“仅邀请顾客创建账户”，Storefront API将无法创建顾客，会返回403错误

4. 确认API URL和请求头正确性 #

• 验证process.env.SHOPIFY_SF_API_URL格式是否正确：https://{你的商店域名}.myshopify.com/api/{API版本}/graphql.json（例如https://your-shop.myshopify.com/api/2024-04/graphql.json）
• 确保请求头中的X-Shopify-Access-Token是有效的Storefront Access Token，而非Admin API Token

5. 查看完整错误响应 #

修改fetch调用，打印完整的响应JSON内容，而非仅响应对象，这能帮你获取更具体的错误信息：

const shopifyUser = await fetch(process.env.SHOPIFY_SF_API_URL, {
    // 其他配置保持不变
  }).then(async (sres) => {
    const responseData = await sres.json();
    console.log(responseData);
    return responseData;
  })

通过以上步骤，应该能定位并解决403 Forbidden错误。

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