I'm quite new to Vue and I've been trying to work out how I could make a call to the Java API using axios.

vue.config.js

module.exports = {
    devServer: {
        proxy: 'https://localhost:8080'
    }
}

main.js

import { createApp } from 'vue'
import axios from "axios"
import VueAxios from 'vue-axios'
import App from './App.vue'
import store from "./store"
import router from "./router"
import './index.css'

const app = createApp(App)

app.use(VueAxios, axios)

app.use(router)
app.use(store)

app.mount('#app')

Dashboard.vue

<template>
  {{responsedata}}
</template>

<script>
  export default {
    name: 'Dashboard',
    data() {
      return {
        responsedata: {}
      }
    },
    async mounted() {
      const { data } = await this.axios.get('/home')
      console.log(data)
    }
  }
</script>

However, no matter how I seem to try, it keeps giving the error:

Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at mergeConfig (axios.js:1308)
    at Axios.request (axios.js:1431)
    at Axios.<computed> [as get] (axios.js:1521)
    at Function.wrap [as get] (axios.js:7)
    at Proxy.mounted (Dashboard.vue:19)
    at callWithErrorHandling (runtime-dom.esm-bundler-6174b24b.js:8129)
    at callWithAsyncErrorHandling (runtime-dom.esm-bundler-6174b24b.js:8138)
    at Array.hook.__weh.hook.__weh (runtime-dom.esm-bundler-6174b24b.js:3392)
    at flushPostFlushCbs (runtime-dom.esm-bundler-6174b24b.js:8330)

In this error I edited the path to the Dashboard.vue:19, but it's coming from there. This line gives the error: const { data } = await this.axios.get('/home').

The API backend looks as following:

@WebServlet
@Path("/home")
public class HomeResource {
    private IServerService serverService;

    @Inject
    public void setServerService(IServerService serverService) {
        this.serverService = serverService;
    }

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Response getServers(@Context HttpServletRequest req) {
        System.out.println("hello");
        HttpSession session = req.getSession();
        session.setMaxInactiveInterval(Time.HALF_AN_HOUR.time);
        return Response
                .ok()
                .header("Access-Control-Allow-Origin", "*")
                .header("Access-Control-Allow-Credentials", "true")
                .header("Access-Control-Allow-Headers", "origin, content-type, accept, authorization")
                .header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD")
                .header("Access-Control-Max-Age", Time.HALF_AN_HOUR.time)
                .entity(serverService.getServers())
                .build();
    }
}

The API runs on localhost port 8080 and the Vue application runs on localhost port 3000. I'm not sure if I am doing the cross-origin wrong or something completely different. All I'm trying to do is trying to get the data from the API and to display it into the front-end.

P.S. thank you for your help.

CodePudding user response：

If your servers are on different URLs and/or ports, you need to give Axios the full URL, e.g. localhost:8080/home. At the moment, Axios is trying to get localhost:3000/home, which is on the Vue side, not the API side.

CodePudding user response：

For now I managed to solve it using jquery instead of axios, but would still like to have the axios solution to this problem, because if I can get the data with jquery it should definitely be doable with axios as well.

jquery solution:

<template>
  {{responsedata}}
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'Dashboard',
    data() {
      return {
        responsedata: []
      }
    },
    mounted() {
      var self = this;
      $.ajax({
          url: 'http://localhost:8080/home',
          method: 'GET',
          success: function (data) {
              self.responsedata = JSON.parse(JSON.stringify(data));
          },
          error: function (error) {
              console.log(error);
          }
      });
    }
  }
</script>