我正在尝试使用 axios 和 django 从 TODO 应用程序中删除项目答案

【问题标题】：I am trying to delete items from TODO app using axios and django我正在尝试使用 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>

这是网络标签的截图。

【问题讨论】：

这对我来说似乎不是一个错误。你能看到是什么引发了错误吗？它会在控制台中获得启动器位置。
另外，你能检查一下网络标签，看看它说了什么，比如 HTTP 状态代码、DELETE 正文等，还是只是预检失败？
请看一下这个问题，也可能是你的情况：stackoverflow.com/questions/10883211/…
@gazdagergo 这个问题很久以前就关闭了。
无论如何，Chrome 不允许 CORS localhost，你可以安装这个扩展来处理它：chrome.google.com/webstore/detail/allow-control-allow-origi/…

标签： reactjs api axios

【解决方案1】：

对此更好的解决方案是为您的 React 应用代理 API 调用。 Create React App 为您提供了解决方案。

首先，我想告诉您，此方法仅适用于使用 Create React App 创建的应用程序，并且此代理仅作为开发功能在开发环境中有效，不适用于生产构建。您只需向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/html 接受标头的无法识别的请求都将被重定向到指定的proxy。

所以它确实是专门用于开发目的，而不是用于生产级用途。这有助于在未来使用类似的设置，并避免所有用于适应环境的疯狂 localhost hacky 架构。

我写了一篇博文，详细介绍了如何设置这个东西 - Using React's Proxy to get ahead of CORS & use HTTPS for API calls。希望这会有所帮助。

【讨论】：

@Amnahkhatun 那么你可以通过这种方式访问：.delete(`/api/todos/${item.id}`, item) - 这将完全解决问题。
是的，我也是这样写的。这是我在响应选项卡中得到的：``` {"detail":"CSRF Failed: CSRF token missing or wrong."} ``
@Amnahkhatun 你能用imgur发送网络标签内容的截图吗？
我无法添加图片
@Amnahkhatun 它说禁止。这很奇怪。

【解决方案2】：

<button>onClick={()=>this.handleDelete(item)}>delete</button>

请注意，为了防止按钮自动提交，我们需要如上所述编写删除按钮

【讨论】：