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

Question

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

1. STREAMLABS API docs.

2. 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>

question from:https://stackoverflow.com/questions/65928341/failed-to-fetch-due-to-cors

Answer 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).