Ошибка аутентификации при использовании режима: no-cors с использованием выборки в React

Я создаю приложение React, которое извлекает различную статистику из сервисов для наших внутренних разработчиков (коммиты, отслеживаемые часы и т. Д.).

Я использую fetch для получения данных API из Harvest, приложения для отслеживания времени. Согласно их документации, вы можете использовать базовую аутентификацию HTTP. Когда я использую приложение Postman, все в порядке, и я прекрасно вижу ответ. Изначально я использовал:

getHarvest(){
    // Set Harvest Headers
   const harvestHeaders = {
     method: 'GET',
     headers: {
       'Authorization': 'Basic xxxxxxxxxxxxxxx=',
       'Content-Type': 'application/json',
       'Accept': 'application/json',
       'Cache-Control': 'no-cache',
     }
   };

   fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
   .then( response => response.json() )
   .then( projects => {

    // Do some stuff


   } )
  }

Это дает мне ошибку в консоли:

API Fetch не может загрузить https://myaccount.harvestapp.com/projects/. Ответ на предполетный запрос не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Следовательно, к источнику 'http://localhost:3000' не разрешен доступ. Ответ имел код состояния HTTP 404. Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса на «no-cors», чтобы получить ресурс с отключенным CORS.

Итак, с этой обратной связью я изменил функцию, чтобы она выглядела так:

getHarvest(){
    // Set Harvest Headers
   const harvestHeaders = {
     method: 'GET',
     mode: 'no-cors',
     headers: {
       'Authorization': 'Basic xxxxxxxxxxxxxxx=',
       'Content-Type': 'application/json',
       'Accept': 'application/json',
       'Cache-Control': 'no-cache',
     }
   };

   fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
   .then( response => response.json() )
   .then( projects => {

    // do stuff


   } )
  }

Но это приводит к ошибке аутентификации:

GET https://myaccount.harvestapp.com/projects/ 401 (Unauthorized)

Я не знаю, как правильно получить ответ. Я делаю что-то неправильно? Мне кажется странным, что использование приложения Postman работает, но это не так. Мысли? Спасибо!


authentication reactjs cors fetch-api harvest
person erwstout    schedule 30.01.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Не похоже, что Harvest API предназначен для использования с XHR или Fetch из веб-приложений.

По крайней мере, в их документах ничего не упоминается об использовании их API из XHR или Fetch, а также в документах ничего не упоминается ни о Access-Control-Allow-Origin, ни о CORS в целом.

Вместо этого в документации приводятся примеры использования API с curl и с REST-клиентом Postman.

И пробуя примеры в документации, как показано ниже, в ответе нет Access-Control-Allow-Origin.

curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \
  -u "[email protected]:password" https://example.harvestapp.com/account/who_am_i

Кажется, ответ таков: вы не можете получить доступ к Harvest API с помощью XHR / Fetch из веб-приложения.

Он работает в Postman, потому что Postman не привязан к той же политике происхождения, которую применяют браузеры, чтобы запретить веб-приложениям, работающим в браузере, делать запросы между источниками, если только сайт / конечная точка, на которую сделан запрос, не выбрал использование CORS (что он похоже, что Harvest не включился).

person sideshowbarker    schedule 30.01.2017