Vue.js GET request to API gets blocked by CORS

Question

I am trying to fetch data from an API in Vue.js and console.log the response but I get a CORS problem, most specifically: from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I read that I need to create a vue.config.js file, I did but nothing changed, I also tried just using the fetch api, maybe I am making http calls the wrong way in Vue, how can I get my data and resolve this error?

Here is my component:

<template>
  <div class="container">
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  methods: {},
  mounted() {
    axios
      .get(
        "https://base-url"
      )
      .then(response => console.log(response));
  }
};
</script>

and my vue.config.js:

module.exports = {
    devServer: {
        proxy: 'base-url',
    }
}

Answer 1

Do you have the header configuration setup for cors in your vue.config? Should look something like this.