【发布时间】：2019-04-29 14:48:53
【问题描述】：
我知道这已经在 SO 上解决了很多次 很多 次，但所有答案大多都是“向服务器添加某个标头”。在这种情况下，API (Shopify) 工作得非常好，可以通过 curl 轻松访问。
我在 Axios 库和 Fetch API 上都试过了。
- 我已经尝试了 Fetch 选项中
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？
【问题讨论】：
-
默认情况下 curl 不会发送任何额外的标头，您可以通过运行带有 -i 选项的 curl 来确认。如果您在 Origin 标头中随请求发送任意值，您应该会收到相同的错误。
-
使用
-i选项运行curl，效果很好。我这样添加了 Origin 标头：curl -i -X GET -H "Authorization:Basic abcde12345" 'https://my-store.myshopify.com/admin/locations.json' -H "Origin:localhost"，它仍然可以正常工作。 -
由浏览器检查
Access-Control-Allow-Origin标头。 cURL 不运行这样的检查，任何其他服务器端软件（例如 NodeJS 或 Tomcat）也不运行。 -
这让我明白了很多：zemnmez.medium.com/…。任何为 curl 有效但不能获取的明显矛盾而苦苦挣扎的人，请阅读：)
-
CORS 解决的真正问题是，没有它，任何域都可以从任何其他域请求任何资源，并且他们可以使用浏览器中已经存在的 cookie .所以他们可以请求
gmail.com/account，如果您登录了 gmail，他们就会看到您的帐户页面。 CORS 阻止了这一点。 （不过，我不明白为什么浏览器不只是不发送 cookie 以及 CORS 不允许的请求。为什么要完全禁用整个请求？）
标签： javascript curl shopify fetch-api