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

Question

Я строй Реагировать приложение, которое тянут разные статы от услуг для наших внутренних разработчиков (зафиксируется, отслеживаются часы и т.д.) ..

Я использую fetch для захвата данных API из Harvest, приложения для отслеживания времени. Согласно their docs, вы можете использовать базовую 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 


    }) 
    } 

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

Fetch API cannot load https://myaccount.harvestapp.com/projects/ . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

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 работает, но это не так. Мысли? Благодаря!

Answer 1

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

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

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

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

curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \ 
    -u "user@example.com:password" https://example.harvestapp.com/account/who_am_i 

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

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