时间戳

首页 > 解决方案 > 使用 cURL 访问 API 可以正常工作，但不能使用 Fetch API

javascript - 使用 cURL 访问 API 可以正常工作，但不能使用 Fetch API

问题描述

我知道这已经在 SO 上解决了很多次，但所有的答案大多都是“向服务器添加某个标头”。在这种情况下，API (Shopify) 工作得非常好，可以通过 curl 轻松访问。

我已经用 Axios 库和 Fetch API 都试过了。

我不明白为什么这在 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);

    });

并且返回的错误是

CORS 策略已阻止从源“ https://localhost:8080 ”获取“ https://my-shop-domain.myshopify.com/admin/locations.json ”的访问权限：不响应预检请求通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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

所以我想我的问题是我能做些什么来使用 javascript 访问这个 API？

标签： javascriptcurlshopifyfetch-api

解决方案

如果您收到 CORS 错误，则说明您做错了。这意味着您将 API 密钥暴露给宇宙。大线索！

相反，您可能希望使用商店中安装的应用程序进行 JS 调用进行调查。您可以为此使用应用代理。您安装的任何应用程序都可以访问您获得批准范围的任何 API 端点。因此，如果您的应用获准请求位置，则请求位置将返回给您。

简单的！

推荐阅读