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

Question

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

*我在 Quasar 框架上使用了“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);

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

Access to XMLHttpRequest at 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

接下来，我添加了 header "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);

但我仍然得到同样的错误:

Access to XMLHttpRequest at 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有什么方法可以解决这个错误吗？

Answer 1

您不能使用您的前端的Admin API从Shopify[=34获取产品=]. 您的前端仅店面API可用，因此请将url替换为：

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

然后，将 header "X-Shopify-Access-Token" 替换为 "X-Shopify-Storefront-Access-Token" 作为如下所示：

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

最后，对于 headers，只有 "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.

Answer 2

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

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

Use Admin API from Frontend(Headless Commerce) to get products from Shopify

javascript

vue.js

graphql

shopify

quasar-framework