发出发布请求时Vue.js axios错误

debugcn 发表于 Dev

明阮

我是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));  
    }

埃文

您使用的是.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。