发出帖子请求时出现Vuejs axios错误答案

【问题标题】：Vuejs axios error when making post request发出帖子请求时出现Vuejs axios错误
【发布时间】：2020-06-07 03:24:25
【问题描述】：

我是 vuejs 新手，我正在学习本教程 (https://www.youtube.com/watch?v=Wy9q22isx3U&t=3492s)。当我尝试发出发布请求时，出现此错误（已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 ) 我可以 console.log(res.data) 但我不能把它放在 todos[] 数组中。

addtodo(newTodo){
      const {title,completed} = newTodo;
      axios.post('https://jsonplaceholder.typicode.com/todos',{
        title,
        completed
      })
      .then(res => {
        this.todos = this.todos.push[res.data];
        //console.log(res.data);
      })
      .catch(err => console.log(err));  
    }

【问题讨论】：

标签： http vue.js axios

【解决方案1】：

您使用.push() 错误，它是括号而不是括号。

new Vue({
  el: "#app",
  data: {
      todos:[{
      "userId": 1,
      "id": 1,
      "title": "delectus aut autem",
      "completed": false
    },
    {
      "userId": 1,
      "id": 2,
      "title": "quis ut nam facilis et officia qui",
      "completed": false
    }]
  },
  methods: {
  	addtodo(newTodo){
      const {title,completed} = newTodo;
      axios.post('https://jsonplaceholder.typicode.com/todos',{
        title,
        completed
      })
      .then(res => {
        this.todos.push(res.data);
        console.log(res.data);
      })
      .catch(err => console.log(err));  
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="addtodo({title:'New todo',completed:true})">
  click to add todo
</button>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
  </ul>
</div>

【讨论】：

我试过this.todos = this.todos.push(res.data)但是没用，请解释原因
我已经编辑了我的答案，只需使用this.todos.push(res.data)。您不必将其分配给新变量。它将修改原始的并返回它的长度。
this.todos = this.todos.push(res.data) 如果你这样做，它将返回this.todos 的新长度。你会得到一个号码。而不是数组

【解决方案2】：

不需要 this.todos = this.todos.push() 只需使用

this.todos.push(res.data)

【讨论】：