使用 Frontend(Headless Commerce) 的 Admin API 从 Shopify 获取产品答案

【问题标题】：Use Admin API from Frontend(Headless Commerce) to get products from Shopify使用 Frontend(Headless Commerce) 的 Admin API 从 Shopify 获取产品
【发布时间】：2022-01-06 22:06:32
【问题描述】：

从我的前端，我尝试使用以下代码从 Shopify 获取具有 Admin API(GraphQL) 的产品：

*我在 Quasar Framework 上使用了“axios”，这是 Headless Commerce

const response = await this.$axios({
  url: "https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json",
  method: 'POST',
  headers: {
    "X-Shopify-Access-Token": "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"
  },
  data: { 
    "query": `
      { 
        products(first: 5) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `
  }
});
console.log(response.data);

但我得到了如下所示的错误：

访问 XMLHttpRequest 在 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' 来自 'http://localhost:8080' 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

接下来，我将标题 "Access-Control-Allow-Origin": "*" 和 "Content-Type": "application/json" 添加为如下图：

const response = await this.$axios({
  url: "https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json",
  method: 'POST',
  headers: {
    "X-Shopify-Access-Token": "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",
    "Access-Control-Allow-Origin" : "*", // Here
    "Content-Type": "application/json" // Here
  },
  data: { 
    "query": `
      { 
        products(first: 5) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `
  }
});
console.log(response.data);

但我仍然遇到同样的错误：

访问 XMLHttpRequest 在 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' 来自 'http://localhost:8080' 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

有没有办法解决这个错误？

【问题讨论】：

标签： javascript vue.js graphql shopify quasar-framework

【解决方案1】：

您不能使用 您的前端 中的 Admin API 从 Shopify 获取产品。 您的前端仅提供 Storefront API，因此请将网址替换为：

                              // "/admin" is removed
"https://healthy-food.myshopify.com/api/2022-01/graphql.json"

然后，将标题 “X-Shopify-Access-Token” 替换为 “X-Shopify-Storefront-Access-Token”，如下所示：

"X-Shopify-Storefront-Access-Token": "yourStorefrontAccessToken"

最后，对于标题，只有 "X-Shopify-Storefront-Access-Token" 就足够了，所以你不需要 “Access-Control-Allow-Origin”：“*”和“Content-Type”：“application/json”。

这是完整的代码：

const response = await this.$axios({ // "/admin" is removed
  url: "https://healthy-food.myshopify.com/api/2022-01/graphql.json",
  method: 'POST',
  headers: { 
    "X-Shopify-Storefront-Access-Token": "yourStorefrontAccessToken"
 // "X-Shopify-Access-Token" is replaced with "X-Shopify-Storefront-Access-Token"
  },
  data: { 
    "query": `
      { 
        products(first: 5) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `
  }
});
console.log(response.data);

您可以参考the documentation。

【讨论】：

【解决方案2】：

Admin API 只允许与 admin api 令牌一起使用。
您只能在您的主题中访问 store front api。

【讨论】：