Доступ к API отлично работает с cURL, но не с Fetch API

Я знаю, что на SO обращались к этому много раз, но все ответы в основном в духе «добавить определенный заголовок на сервер». В этом случае API (Shopify) работает отлично, и к нему легко получить доступ через curl.

Я пробовал это как с библиотекой Axios, так и с Fetch API.

  • Я пробовал все значения для referrer, mode и referrerPolicy в параметрах Fetch.
  • Я подтвердил, что мои учетные данные 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.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 не отправляет никаких дополнительных заголовков, что вы можете подтвердить, запустив curl с параметром -i. Если вы отправите произвольное значение в заголовке Origin вместе с запросом, вы должны получить ту же ошибку.

axel.michel 27.11.2018 20:38

Запуск curl с опцией -i, и он отлично работает. Я добавил заголовок Origin так: curl -i -X GET -H "Authorization:Basic abcde12345" 'https://my-store.myshopify.com/admin/locations.json' -H "Origin:localhost", и он все еще работал нормально.

JakeParis 27.11.2018 20:42

Браузер должен проверить заголовок Access-Control-Allow-Origin. cURL не выполняет такую ​​проверку, как и любое другое серверное программное обеспечение (например, NodeJS или Tomcat).

skyboyer 27.11.2018 20:44

Это многое прояснило для меня: zemnmez.medium.com/…. Всем, кто борется с очевидным противоречием того, почему curl работает, но не fetch, прочтите, пожалуйста, это :)

LGenzelis 07.04.2021 02:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
15
4
3 479
1

Ответы 1

Вы делаете это неправильно, если получаете ошибки CORS. Это означает, что вы раскрываете свои ключи API вселенной. Большая подсказка!

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

Простой!

Другие вопросы по теме