使用 cURL 访问 API 可以正常工作，但使用 Fetch API 则不行 [重复]

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

我已经使用 Axios 库和 Fetch API 尝试过此操作。

• 我已经尝试过每个值referrer, mode, and 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://my-shop-domain.myshopify.com/admin/locations.json'从原点'https://本地主机:8080 https://localhost:8080' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

如果 Shopify 不包含访问控制允许来源header，为什么请求使用 cURL 可以正常工作？有节点库和 Ruby 库可以访问 Shopify API，因此很难相信它们根本不允许通过 JavaScript 进行访问。

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

为什么？解释：

CORS政策实施在浏览器中允许网站之间共享资源，同时防止网站相互攻击：

• SOP（同源政策） https://portswigger.net/web-security/cors/same-origin-policy防止网站相互攻击，但不允许源之间进行任何共享。
• CORS（跨源资源共享） https://portswigger.net/web-security/cors放宽了 SOP 限制，但需要特定的服务器标头/配置。

这些策略仅适用于浏览器内部。据推测，cURL 之所以有效，是因为它在浏览器脚本上下文之外发出直接 HTTP 请求。这导致了如何解决 CORS 限制......

解决方案：

修复 CORS 错误的 3 种方法 - 以及 Access-Control-Allow-Origin 标头的工作原理 https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9解释如何绕过 CORS 限制。它们都是通过操纵请求标头/来源来工作的：

1. 浏览器扩展。 （不确定这在 2022 年是否仍然有效。仅当用户安装浏览器扩展时才有效。）
2. 第 3 方请求代理。 （演示中链接的代理现在由于滥用而受到限制。）
3. 构建您自己的代理。

实际上，选项#3 是唯一真正的解决方案。SvelteKit 端点 https://kit.svelte.dev/docs/routing使代理请求变得超级简单。