Неверный запрос (400) при попытке аутентификации Harvest API в React

Question

Поэтому я создаю доску состояния для нашего внутреннего использования в качестве разработчиков здесь, в офисе. Он покажет количество коммитов, количество отслеженных часов и т. Д.

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

Что происходит, если вход выполнен успешно, но когда вы перенаправлены обратно в приложение, выборка выдает ошибку Bad Request (400). Я проверил в Почтальоне и могу получить правильный ответ, поэтому я не уверен, в чем проблема...

Вот некоторые из JS из компонента Main, который устанавливает состояния, если есть параметр кода:

harvestState() {

// grab URL params
let urlParams = queryString.parse(location.search);
console.log(urlParams);
console.log(urlParams.code);

// set the state based on the paramater passed back
urlParams.code ? (
  this.setState({
    harvestcode: urlParams.code
  })
) : (
  this.setState({
    harvestcode: 'none'
  })
);
}

componentWillMount(){
  this.harvestState();
}

А вот функция извлечения в моем компоненте Harvest:

  getHarvest(){
    const clientSecret = 'XXXXXXXXXX';
    // Set Harvest Headers
   const harvestHeaders = {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
    method: 'POST',
    mode: 'no-cors',
    body: {
      'code': this.props.code,
      'client_id': this.props.clientid,
      'client_secret': clientSecret,
      'redirect_uri': 'http://dash.mycompany.me',
      'grant_type': 'authorization_code'
    }
   };

   fetch('https://mycompany.harvestapp.com/oauth2/token', harvestHeaders)
   .then( response => response.json() )
   .then( token => {

     console.log(token);

   } )
  }

  componentDidMount(){
    if( this.props.code !== 'none' ){
      this.getHarvest();
    }
  }

Есть ли здесь что-то, что я делаю не так? Почему он всегда возвращает неверный запрос? Любая помощь будет оценена. Спасибо!

Answer 1

По крайней мере, одна проблема у вас заключается в том, что при использовании mode: 'no-cors' вы говорите браузеру обрабатывать ответ как непрозрачный ответ, что означает, что вы говорите браузеру не делать какие-либо свойства объекта ответа доступными из JavaScript.

Так что если вы сделаете mode: 'no-cors' запрос, response => response.json() собирается потерпеть неудачу.

Единственная цель для no-cors на практике это в сочетании с Service Workers, когда вы просто кэшируете ресурсы (например, изображения) из ответов, без необходимости получать свойства ответов.

В любом случае, учитывая, что клиентское веб-приложение, выполняющее запросы в вашем развертывании, запускается из другого источника, чем сервер, на который отправляются запросы, браузеры будут блокировать запросы, если сервер не ответит необходимыми заголовками CORS.Access-Control-Allow-Origin, для начала. Объяснение см. В статье MDN Контроль доступа HTTP (CORS).

То есть браузеры блокируют перекрестные запросы, сделанные из JavaScript, если сервер, на который запросы отправляются, не разрешает их, с Access-Control-Allow-Originи т. д., заголовки ответа. Причина, по которой Postman не блокирует такие запросы, заключается в том, что Postman - это не произвольное веб-приложение, работающее в каком-то определенном месте в Интернете, а плагин для браузера, который вы намеренно установили. Таким образом, он не ограничен браузерными ограничениями для веб-приложений.