Question

我想从前端的Web应用发送测试捐赠。为此，我使用：

STREAMLABS API docs。
带有模板的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没有有用的信息。

屏幕截图：

同时具有相同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服务器返回的错误正文？

Answer 1

我相当确定您遇到的错误与Axios或Vue没有任何关系。请求失败的原因是您在浏览器中创建了请求：至少在当今，浏览器对允许的请求和阻止的请求有非常严格的规则。

我无法获取该错误的正文，以了解错误所在。 Axios error.response是undefined，而error没有有用的信息。

那是因为不允许您的浏览器向您显示此信息（或更确切地说，是您编写的脚本）。那是因为CORS。 CORS确保脚本只能与来源（它们来自的域）或明确允许资源共享的站点中的事物进行交互。 em>（ CORS 中的 RS ）。 Streamlabs根本没有为其API配置资源共享（稍后我将介绍原因）。

那么您的请求为什么在Postman中起作用？因为Postman不是浏览器，也不在乎CORS。这是否意味着您无法在应用中使用Streamlabs API？不一定，您只需要在服务器端执行此操作，因为您的服务器不是浏览器。这还具有您不向用户公开访问令牌的好处（这可能是Streamlabs尚未配置RS的原因）。

使用STREAMLABS API在Vue.js中没有axios errror.response

1 个答案: