Плохой запрос (400) При попытке аутентифицировать API урожая в реактиве

Question

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

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

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

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

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' вы говорите обозревателю, чтобы обработать ответ как opaque response, а это означает, что вы сообщаете браузеру о том, что какие-либо свойства объекта ответа не доступны из JavaScript.

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

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

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

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