axios()与axios.post()的区别及Shopify请求403问题解析

我来帮你拆解这个问题，核心原因是你对axios.post()的参数结构理解有误，导致请求头没有被正确设置，Shopify验证失败才返回403。咱们先对比两种调用方式的区别，再看你的代码问题：

两种axios调用方式的核心差异 #

• axios(config)：这是axios最基础的调用方式，接收一个完整的配置对象，所有请求相关的参数（method、url、headers、data等）都放在这个对象里，参数位置不会混淆，你的这个写法是完全正确的，所以能正常拿到响应。

• axios.post(url, data, config)：这是post请求的快捷语法，参数顺序是固定的：

  1. 第一个参数：请求的URL
  2. 第二个参数：请求体的data（对应GraphQL的查询语句）
  3. 第三个参数：配置对象（包含headers、params等）

你的代码问题所在 #

看你写的axios.post()代码：

axios.post( 
  SHOPIFY_DOMAIN, 
  { headers: { "Content-Type": "application/graphql", "X-Shopify-Storefront-Access-Token": SHOPIFY_TOKEN }, data: `{ shop }` } 
)

你把本该放在第三个参数的headers配置，错误放到了第二个参数（也就是data的位置）。这就导致：

• 实际的请求体被替换成了你的headers对象，而不是GraphQL查询语句
• 真正的请求头里没有带上X-Shopify-Storefront-Access-Token，Shopify无法验证你的身份，直接返回403 Forbidden

修正后的代码 #

只需要把参数顺序调整正确，把headers放到第三个配置参数里，data作为第二个参数传入：

axios.post(
  SHOPIFY_DOMAIN,
  `{ shop }`, // GraphQL查询语句作为请求体data
  {
    headers: {
      "Content-Type": "application/graphql",
      "X-Shopify-Storefront-Access-Token": SHOPIFY_TOKEN
    }
  }
)

这样请求头就能正确携带认证令牌，Shopify就能正常处理你的请求了。

内容的提问来源于stack exchange，提问作者a.barbieri