在 Vue 中使用 Axios Api 发布数据答案

【问题标题】：Posting data using Axios Api in Vue在 Vue 中使用 Axios Api 发布数据
【发布时间】：2020-05-18 12:01:57
【问题描述】：

我尝试使用这些代码在 Vue 中使用 Axios Api 发布数据，但出现以下错误：

访问 XMLHttpRequest 在来自原点“null”的“https://jsonplaceholder.typicode.com/todos”有被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。 16_Axios_API_CRUD.html:96 错误：网络错误在 e.exports (spread.js:25) 在 XMLHttpRequest.l.onerror (spread.js:25)

 new Vue({
        el: "#app",
        data() {
          return {
            todos: [],
            newTodo: "",
            loading: true,
            errored: false
          };
        },
        methods: {          
          addToDo() {
            debugger;
            const _todo = {
              title: this.newTodo,
              completed: false
            };

            //const { title } = this.newTodo;
            axios
              .post("https://jsonplaceholder.typicode.com/todos", _todo)
              .then(res => (this.todos = [...this.todos, res.data]))
          }
        },
        mounted() {
          axios
            .get("https://jsonplaceholder.typicode.com/todos?_limit=5")
            .then(response => (this.todos = response.data))
        }
      });

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <div id="app">
      <input
        v-model.trim="newTodo"
      />
      <input
        value="Add"
        type="button"
        v-on:click="addToDo"
      />

      <section v-else>
        <div v-bind:key="todo.id" v-for="todo in todos">
          <div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
            <p>
              {{todo.title}}
            </p>
          </div>
        </div>
      </section>
    </div>

以前有人遇到过这个错误信息吗？在发布之前，我是否需要在一些教程中注意到的析构函数？不太清楚为什么有些教程有析构函数。

编辑：看起来像“处理缓慢”的问题。我可以在很长一段时间后发布数据。如何添加一些“动画”以显示它实际上正在发布数据并正在返回数据？

【问题讨论】：

您不应该使用绝对 URL。你不使用代理服务器吗？因此，您可以向相对 URL 发出请求，避免此类问题。更多信息：freecodecamp.org/news/…

标签： javascript vue.js cors axios

【解决方案1】：

您正在使用绝对 URL。有两种方法可以处理这个问题。

配置您的服务器以处理 CORS 标头
使用 webpack-dev-server 或 nginx 等工具配置本地反向代理。

如果你选择第二个，这是推荐的，你的代码将是这样的：

axios
          .post("/api/todos", _todo)
          .then(res => (this.todos = [...this.todos, res.data]))

在你的反向代理中，由 webpack-dev-server 实现：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'https://jsonplaceholder.typicode.com'
    },
    secure: true
  }
};

更多信息：

【讨论】：