В Vue.js отсутствует axios errror.response с API-интерфейсом STREAMLABS - PullRequest
Новая
       20

В Vue.js отсутствует axios errror.response с API-интерфейсом STREAMLABS

0 голосов
/ 10 декабря 2018

Я хочу отправить тестовое пожертвование из моего веб-приложения.Для этого я использую:

  1. API STREAMLABS документы .

  2. Vue v2.5.17 компонент с шаблоном: 

<template>
 <layout>
  <h1>Dashboard</h1>
   <p><label for="donationSum">Sum</label></p>
   <p><input type="number" id="donationSum" v-model="amount"></p>
   <button @click="makeDonation">DONATE</button>
 </layout>
</template>

'makeDonation' - это сопоставленное действие из Vuex: 

makeDonation ({ getters }) {
  const url = 'https://streamlabs.com/api/v1.0/donations'
  const postData = JSON.stringify({
    name: 'TEST',
    identifier: 'TEST',
    amount: 100.00,
    currency: 'RUB',
    access_token: getters.streamlabsAccessToken
  })

  axios.post(url, postData)
    .then(response => {
      console.log(response.data)
    })
    .catch(error => {
      console.log(error)
      console.log(error.response)
    })
}

Я абсолютно уверен, что у меня есть действительный access_token, но я получаю ошибку 400: 

POST https://streamlabs.com/api/v1.0/donations 400
 {...}
POST https://streamlabs.com/api/v1.0/donations 400
 {...}
Access to XMLHttpRequest at 'https://streamlabs.com/api/v1.0/donations' from 
origin 'http://192.168.39.27:8080' has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error
  at createError (createError.js?2d83:16)
  at XMLHttpRequest.handleError (xhr.js?b50d:87)
undefined

Это нормальное поведение сервера.Если что-то не так в запросе, выдает ошибку 400 или 401, но есть проблема.Не могу получить доступ к телу ошибки, чтобы понять, что не так.Axios error.response - это undefind, а error не содержит полезной информации.

Снимки экрана:

  1. Google Chrome 71.0.3578.80 x64 log console

  2. Google Chrome 71.0.3578.80 x64 детали запроса

Между тем почтальон с тем же postData делает действительнымзапрос и возвращает 200 ответ.Если я испортил запрос (например, удалил access_token), он возвращает информативную ошибку: 

{
    "error": "invalid_request",
    "error_description": "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"access token\" parameter."
}

Большой вопрос : как мне получить доступ к телуошибка, которую возвращает сервер STREAMLABS?

1 Ответ

0 голосов
/ 10 декабря 2018

Я вполне уверен, что ошибка, с которой вы столкнулись, не имеет ничего общего с Axios или Vue.Причина, по которой запрос не выполняется, заключается в том, что вы делаете его в браузере: браузеры, по крайней мере в наши дни, имеют довольно строгие правила относительно того, какие запросы они разрешают и какие запросы они блокируют.

Я не могуполучить доступ к телу ошибки, чтобы понять, что не так.Axios error.response - это undefined, а error не имеет полезной информации.

Это потому, что вашему браузеру не разрешено показывать вам эту информацию (илиточнее сценарий, который вы написали).Это из-за CORS .CORS гарантирует, что сценарии могут взаимодействовать только с вещами, которые находятся на их origin (домене, откуда они приходят) или сайтах, которые явно разрешают совместное использование ресурсов ( RS в CORS ).Streamlabs просто не настроил совместное использование ресурсов для своего API (я выясню почему через секунду).

Так почему ваш запрос работает в Postman?Потому что Почтальон не браузер и не заботится о CORS.Означает ли это, что вы не можете использовать API Streamlabs в своем приложении?Не обязательно, вы просто должны сделать это на стороне сервера, потому что ваш сервер не является браузером.Это также дает то преимущество, что вы не предоставляете свой токен доступа своим пользователям (что может быть причиной того, что Streamlabs не настроил RS).

...