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

Posted 2023-03-03

【中文标题】发出帖子请求时出现Vuejs axios错误

【英文标题】：Vuejs axios error when making post request

【发布时间】：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));  
    

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