如何使用 axios 将 express 连接到 vue 应用程序

Question

我正在尝试将我的本地 express api 连接到我的 Vue 应用程序。当我在浏览器中转到“http://localhost:3000/all”时，它会按预期显示数组“myArr”值。但是我无法让 Axios 在我的 Vue 脚本中返回数组值，我不断收到类似“TypeError: Cannot read property 'get' of undefined”的错误。

我一直在寻找一段时间没有运气。我找到了一些提供处理 cors 解决方案的线程，但我无法让其中任何一个工作。

如何让“myArr”值显示在我的 vue 应用程序中？

---

这是我的 Express 脚本：

const express = require('express');

const myArr = ["one", "two", "three"];

console.log("server is starting");
const app = express();
const server = app.listen(3000);

app.get("/all", function sendAll(req, res) {
  res.send(myArr);
});

这是我的 Vue 脚本：

<template>
  <div class="container">
    <p>test</p>
    <p class="error" v-if="error">{{ error }}</p>
    <div class="item-container">
      <div
        class="items"
        v-for="(myItem, index) in myItems"
        v-bind:item="myItem"
        v-bind:key="index"
      >
        <p>{{ myItem }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { axios } from "axios";
export default {
  name: "vue-app",
  data() {
    return {
      myItems: [],
      error: ""
    };
  },
  async created() {
    const res = await axios.get("http://localhost:3000/all");
    this.myItems = res.data;
  }
};
</script>
//style

如果我可以提供更多信息，请告诉我，我感谢任何/所有帮助:)

Answer 1

现在 axios 的平均值是 undefined
解决方案：
替换：import { axios } from "axios";
到：import axios from 'axios';