http - 发出发布请求时出现Vuejs axios错误
问题描述
我是 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>
推荐阅读
- ios - NativeScript-Vue RadList 在 IOS 上无法正常工作
- angular - 升级到 TypeScript 3.1.6(或更高版本)后编译错误
- c++ - 如何在不设置为最大化的情况下最大化尺寸?
- docker - docker 中的 Rust actix_web 无法实现,为什么?
- python - 在Python中清空列表的最快方法是什么
- c++ - 为什么即使我们将指针分配给NULL,指针的指向对象的大小也不为零?
- azure - Azure 应用程序洞察中的“Fx 函数”是什么?你怎么能加一个?
- python - 删除包含字符串的行 - Pandas 数据框
- php - Laravel:测试多用户注销
- asp.net-core - 在 .Net Core 中使用 AuthorizeAttribute 进行用户或角色授权