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

问题

I want to send a test donation from my fronted web app. For this i use:

STREAMLABS API docs.
Vue v2.5.17 component with template:

<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' is mapped action from 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)
    })
}

I am absolutely sure that I have the valid access_token, but I get an error 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

This is normal server behavior. If something is wrong in the request, it gives 400 or 401 error, but there is a problem. I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefind and error has no useful information.

Screenshots:

Google Chrome 71.0.3578.80 x64 console log
Google Chrome 71.0.3578.80 x64 request details

Meanwhile Postman with the same postData makes a valid request and returns 200 response. If I corrupt the request (delete the access_token, for example), then it returns informative error:

{
    "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."
}

The big question: how do I get access to the body of the error that the STREAMLABS server returns?

回答1:

I'm fairly certain that the error you're experiencing doesn't have anything to do with Axios or Vue. The reason the request is failing is that you're making it inside a browser: Browsers, at least nowadays, have pretty strict rules on what requests they allow and what requests they block.

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.

That's because your browser is not allowed to show this information to you (or, to be more precise, the script you wrote). That's because of CORS. CORS makes sure that scripts can only interact with things that reside on their origin (the domain they're coming from) or sites that explicitly allow resource sharing (the RS in CORS). Streamlabs has simply not configured resource sharing for their API (I'll get to why in a second).

So why does your request work in Postman? Because Postman isn't a browser and doesn't care about CORS. Does that mean you can't use the Streamlabs API in your app? Not necessarily, you just have to do it on the server side because your server isn't a browser. This also has the benefit that you don't expose your access token to your users (which might be the reason why Streamlabs has not configured RS).

来源：https://stackoverflow.com/questions/53710098/blocked-by-cors-policy-error-with-https-streamlabs-com-api-v1-0-endpoint

标签

http

Vue.js

axios

twitch