https://streamlabs.com/api/v1.0 端点出现“被 CORS 策略阻止”错误

Question

我想从我的前端网络应用程序发送测试捐款。为此，我使用：

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 的 Postman 发出了有效请求并 returns 200 响应。如果我破坏了请求（例如删除 access_token），那么它会 returns 信息性错误：

{
    "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 服务器 returns 的错误正文？

Answer 1

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

I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefined and error has no useful information.

那是因为您的浏览器不允许向您显示此信息（或者，更准确地说，您编写的脚本）。那是因为 CORS。 CORS 确保脚本只能与驻留在其 origin（它们来自的域）或站点上的内容交互，这些站点明确允许 资源共享（RS in CORS）。 Streamlabs 根本没有为其 API 配置资源共享（稍后我会解释原因）。

那么，为什么您的请求在 Postman 中有效？因为 Postman 不是浏览器，不关心 CORS。这是否意味着您不能在您的应用程序中使用 Streamlabs API？不一定，你只需要在服务器端做，因为你的服务器不是浏览器。这还有一个好处，即您不会将访问令牌暴露给您的用户（这可能是 Streamlabs 未配置 RS 的原因）。

https://streamlabs.com/api/v1.0 端点出现“被 CORS 策略阻止”错误

“blocked by CORS policy” error with https://streamlabs.com/api/v1.0 endpoint

http

twitch

vue.js

axios