我正在尝试使用axios和django从TODO应用程序中删除项目。
我正在尝试使用axios和django从TODO应用程序中删除项目。
提问于 2019-05-24 08:15:08
我无法从TODO应用程序中删除项目。我使用react和axios来删除。以下是我在“网络”选项卡中遇到的错误。
Provisional headers are shown
Origin: null
Referer: http://localhost:3000/handleDelete = item => {
axios
.delete(`http://localhost:8000/api/todos/${item.id}`, item)
.then(res => this.refreshList());
};按钮：
<button onClick={() => this.handleDelete(item)} className="btn btn-danger">
Delete
</button>这是网络选项卡的截图。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-24 08:28:48
一个更好的解决方案是为您的React代理API调用。为您提供了一个解决方案。
在此之前，我想告诉您，此方法只适用于使用created创建的应用程序，而且此代理仅作为开发特性在开发环境上工作，并且无法用于生产构建。您只需要向package.json添加一个名为proxy的新键，然后重新启动服务器。
"proxy": "http://localhost:8000/",现在，完整的package.json文件如下所示。
{
"name": "project-name",
"version": "1.0.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"react": "^16.8.4",
"react-scripts": "2.1.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}对于DELETE请求，只需调用：
handleDelete = item => {
axios
.delete(`/api/todos/${item.id}`, item)
.then(res => this.refreshList());
};以上代码将与CORS无关。
从手册上..。
请记住，
proxy只在开发中起作用(使用npm start__)，应该由您来确保像/api/todos这样的URL在生产中指向正确的东西。您不必使用/api前缀。没有text/htmlaccept标头的任何不可识别的请求将被重定向到指定的proxy__。
因此，它确实是专门用于开发目的的，而不是用于生产级的。这有助于未来的工作，那里有类似的设置，并避免了所有疯狂的本地主机黑客架构，以配合环境。
我写了一篇博客，详细介绍了如何设置这个东西-- Using React's Proxy to get ahead of CORS & use HTTPS for API calls。希望这能有所帮助。
Stack Overflow用户
发布于 2020-01-24 20:38:18
<button>onClick={()=>this.handleDelete(item)}>delete</button>请不要这样，为了防止自动提交按钮，我们需要如前所述写删除按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56288469
复制相关文章
相似问题
腾讯云开发者
