使用cURL访问API很好，但使用Fetch API [duplicate]就不行了

Question

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

我在Axios库和Fetch API中都尝试过这一点。

• 我已经尝试了Fetch选项中的referer、mode和referrerPolicy的每个值
• 我已确认我的基本凭证是正确的
• 我在多个浏览器中尝试过
• 我已经从localhost和localhost两个方面进行了尝试。com（在my/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);

    });

返回的错误是

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

如果Shopify不包含Access-Control-Allow-Origin标头，为什么html" target="_blank">请求可以很好地使用cURL？有节点库和Ruby库可以访问Shopify API，所以很难相信它们根本不允许从javascript访问。

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

Answer 1

为什么？解释：

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

< li>SOP(同源策略)防止网站相互攻击，但不允许不同来源之间的任何共享。 < li>CORS(跨源资源共享)放宽了SOP限制，但需要特定的服务器头/配置。

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

解决方案:

3种修复CORS错误的方法-以及Access Control Allow Origin标头如何工作解释了如何绕过CORS限制。它们都通过操纵请求头/源来工作：

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

实际上，选项#3是唯一真正的解决方案。SvelteKitendpoint使代理请求变得超级简单。

Answer 2

您必须使用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);
    });