获取Vue中Axios的Shopify Admin端点

Question

你怎么做？

从Shopify获取产品

<template>
    <div>{{ data }}</div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ShopifyResult',
  data () {
    return {
      data: null
    }
  },
  mounted () {
    const url = 'https://a-shopify-store.myshopify.com/admin/api/2021-10/checkouts.json';
    axios({
        method:'get',
        url,
        headers: {
        "Content-Type": "application/json",
        "X-Shopify-Access-Token": 'API_ADMIN_ACCESS_TOKEN_HERE',
        },
    }).then((result) => {
        console.log(result.data)
    }).catch(error => {
        console.log(error)
    });
  }
}
</script>

这就是我得到的：

访问xmlhttprequest at 'https://a-shopify-store.myshopify.com/admin/api/2021-10/checkouts.json' 从原点'http：// localhost：8080'被CORS策略所阻止： 对飞行前请求的响应不会传递访问控制检查：否 请求的“访问控制”标头 资源。 shopifyresult.vue？4048：27 axioserror

为什么涉及CORS？我有一个适当的钥匙。你怎么做？

我还发现

https://community.shopify.com/c/technical-qa/vue-axios-get-requests-how-to-secure-secure-secure-apikey-apikey-and-apipass/td-pd-p/689016

没有答案.....

Answer 1

https://community.shopify.com/c/shopify-apis-and-sdks/ususe-apis-from-a-different-origin-domain/td-p/502781

这样想：

StoreFront API是公共API，它的令牌是
在客户端使用。

admin API是私人API，令牌并不意味着共享
公开。如果您通过从
浏览器，他们可以潜在地访问有关的私人信息
您的商店，财务信息，客户信息等

这可能会给您的客户带来不便
如果要遭受欺诈，如果您可能会遇到法律问题
有人决定因此起诉您。

因此，Shopify检测到您使用的时会丢下CORS错误
浏览器将请求发送到私人API。虽然CORS错误可能
在这里不是最合适的回应，对他们来说是有效的
拒绝您的请求。

希望能阐明其他遇到此错误的问题。