Can't send GET Request with Vue

Question

This is my Vue Component

<template>
  <v-container>
    <div id="app">
      {{ posts }}
      <v-divider></v-divider>
      {{status}}
    </div>
  </v-container>
</template>

<script>
  import axios from "axios";

  export default {
    el: '#app',
    data () {
      return {
        status:null,
        posts: []
      }
    },
    mounted () {
      axios
          .get('http://localhost:8080/uebungen')
          .then(response =>{
                this.posts=response.data
              }
          )
    }
  }

</script>

I want to make a get request on my Spring Programm, I can work with my backend perfectly, i can send a get request from python or postman without any problems, but if i send one with Vue axios i got this weird error in my browser. I am pretty new to Vue, I hope i haven't messed up with some basics. I wont get an error in vue or in my spring programm, in vue it just won't show anything

Answer 1

This is cors error, your browser is blocking the response due to security concerns.

Cross-Origin Resource Sharing (CORS) is a standard that allows a server to relax the same-origin policy. This is used to explicitly allow some cross-origin requests while rejecting others.

What can be done:

• If you are the backend dev, allow your site URL (from where you are making the request)(FE) in the response header.
• If you don't have access to the backend, you can disable CORS, using browser extemnsion for your device.

Read more about CORS