在 Vue 中使用 Axios Api 发布数据

Posted 2023-02-22

【中文标题】在 Vue 中使用 Axios Api 发布数据

【英文标题】：Posting data using Axios Api in Vue

【发布时间】：2020-05-18 12:01:57

【问题描述】：

我尝试使用这些代码，但出现以下错误：

访问 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/…

【参考方案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
  
;

更多信息：

https://www.freecodecamp.org/news/never-use-an-absolute-path-for-your-apis-again-9ee9199563be/ https://webpack.js.org/configuration/dev-server/#devserverproxy