Я знаю, что на SO обращались к этому много раз, но все ответы в основном в духе «добавить определенный заголовок на сервер». В этом случае API (Shopify) работает отлично, и к нему легко получить доступ через curl.
Я пробовал это как с библиотекой Axios, так и с Fetch API.
referrer, mode и referrerPolicy в параметрах Fetch.Я не могу понять, почему это отлично работает в 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.info( resp );
})).catch( err => {
console.error(err);
});
и возвращаемая ошибка
Access to fetch at 'https://my-shop-domain.myshopify.com/admin/locations.json' from origin 'https://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Если Shopify не включает заголовок Доступ-Контроль-Разрешить-Происхождение, почему запрос отлично работает с cURL? Существуют библиотеки узлов и библиотеки Ruby для доступа к Shopify API, поэтому трудно поверить, что они вообще не разрешают доступ из javascript.
Итак, я думаю, мой вопрос в том, что я могу сделать, чтобы получить доступ к этому API с помощью javascript?
Запуск curl с опцией -i, и он отлично работает. Я добавил заголовок 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 работает, но не fetch, прочтите, пожалуйста, это :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы делаете это неправильно, если получаете ошибки CORS. Это означает, что вы раскрываете свои ключи API вселенной. Большая подсказка!
Вместо этого вы можете исследовать использование приложения, установленного в вашем магазине, для выполнения ваших JS-вызовов. Для этого вы можете использовать прокси приложения. И любое установленное вами приложение может получить доступ к любой конечной точке API, для которой вы получили утвержденные области действия. Таким образом, запрос местоположения вернет их вам, если ваше приложение будет одобрено для их запроса.
Простой!
по умолчанию curl не отправляет никаких дополнительных заголовков, что вы можете подтвердить, запустив curl с параметром -i. Если вы отправите произвольное значение в заголовке Origin вместе с запросом, вы должны получить ту же ошибку.