未捕获的（promise中的）类型错误：无法将未定义或null转换为对象

Question

我对Vue相当陌生，我一直在尝试如何使用Axios调用Java API。

vue.config.js

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

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>

然而，无论我如何尝试，它总是给出错误：

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)

在这个错误中，我编辑了dashboard.vue:19的路径，但它来自那里。这行给出了错误:const{data}=await This.axios.get('/home')。

@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();
    }
}

API运行在localhost端口8080上，Vue应用程序运行在localhost端口3000上。我不确定是我做错了跨原点还是完全不同的事情。我所要做的就是从API获取数据并将其显示到前端。

附言。谢谢你的帮助。

Answer 1

如果服务器位于不同的URL和/或端口上，则需要给Axios提供完整的URL，例如localhost:8080/home。目前，Axios正在尝试获取localhost:3000/home，它位于Vue端，而不是API端。