Question

我知道在SO上已经解决了很多次，但是所有的答案大多都与“向服务器添加特定标头”有关。在这种情况下，API（Shopify）可以很好地工作，并且可以通过curl轻松访问。

我已经使用Axios库和Fetch API进行了尝试。

我已经尝试了“提取”选项中referrer，mode和referrerPolicy的每个值。
我已确认我的BasicAuth凭据正确。
我已经在多种浏览器中尝试过。
我已经尝试从localhost，localhost.com（在我的/ etc / hosts中设置值）和具有真实域名的服务器尝试了。

我不明白为什么这在cURL中会很好地工作，但不能与fetch（）一起工作。

这是我的代码的简化版：

const apiKey = 'mykey';
const apiPassword = 'mypass';
const apibase = 'https://my-shop-domain.myshopify.com/admin/';
const endpoint = 'locations.json';

var headers = new Headers({
   "Authorization": "Basic " + btoa( apiKey + ':' + apiPassword ),
});

    fetch( apibase + endpoint {
      method: 'GET',
      headers: headers,
      mode: 'no-cors',
      // cache: "no-store",
      // referrer: "client",
      // referrerPolicy: "origin",
      // credentials: 'include'
    }).then( resp => resp.json().then( resp => {

      console.log( resp );

    })).catch( err => {

      console.error(err);

    });

，返回的错误是

从原点“ https://my-shop-domain.myshopify.com/admin/locations.json”到“ https://localhost:8080”的获取操作已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否“ Access-Control-Allow-来源的标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

如果Shopify不包含 Access-Control-Allow-Origin 标头，为什么请求与cURL一起正常工作？有节点库和Ruby库可以访问Shopify API，因此很难相信它们根本不允许来自javascript的访问。

所以我想我的问题是我该怎么做才能通过javascript访问此API？

Answer 1

如果遇到CORS错误，则您做错了。这意味着您要将API密钥公开给Universe。大头绪！

相反，您可能想调查使用商店中安装的App进行JS调用的情况。您可以为此使用应用程序代理。您安装的任何应用程序都可以访问您获得批准范围的任何API端点。因此，如果您的应用程序被批准可以要求您提供位置信息，则会将其返回给您。

简单！

使用cURL可以很好地访问API，但不能使用Fetch API

1 个答案: