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

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://localhost:8080 ”访问“ https://my-shop-domain.myshopify.com/admin/locations.json ”已被CORS政策阻止：对预检请求的响应没有通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

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

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

Answer 1

您必须使用 FormData 而不是 JSON。

    var data = new FormData();
    data.append('key', 'value');

    fetch('api', {
    method: 'POST',
    body: data,
    })
    .then(response => response.json())
    .then(data => {
    console.log(data);
    });