I am trying to delete items from TODO app using axios and django

Question

I am unable to delete items from TODO app. I am using react and axios for deleting. Here is the error I am getting in network tab.

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:

<button onClick={() => this.handleDelete(item)} className="btn btn-danger">
  Delete
</button>

Here is the screenshot of network tab.

That doesn't seem like an error to me. Can you see what initiated the error? It would have got the initiator location in the console. — Praveen Kumar Purushothaman, May 24 '19 at 08:17
Also, can you check the network tab, see what it says, like HTTP Status Code, the DELETE body, etc. or is it just a preflight failure? — Praveen Kumar Purushothaman, May 24 '19 at 08:18
Please have a look on this issue, it might be your case too: https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin — gazdagergo, May 24 '19 at 08:25
Anyways, Chrome does not allow CORS localhost, and you can handle it installing this extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi — gazdagergo, May 24 '19 at 08:28
@gazdagergo Better way to work it in the official method without any plugins: [Using React's Proxy to get ahead of CORS & use HTTPS for API calls](https://blog.praveen.science/using-reacts-proxy-to-get-ahead-of-cors/)... — Praveen Kumar Purushothaman, May 24 '19 at 08:29

Praveen Kumar Purushothaman · Accepted Answer · 2019-05-24T08:34:08.927

A better solution for this is to proxy the API Calls for your React App. Create React App provides you with a solution.

Before anything, I would like to tell that this method applies only for the applications that are created using Create React App and also this proxying works only on the development environment as a development feature and is not available for the production build. You just need to add a new key to the package.json called proxy and then restart the server.

"proxy": "http://localhost:8000/",

Now, your complete package.json file looks something like this.

{
  "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"
  }
}

And for the DELETE requests, you can just call:

handleDelete = item => {
  axios
    .delete(`/api/todos/${item.id}`, item)
    .then(res => this.refreshList());
};

The above code will have nothing related to CORS.

From the manual...

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production. You don’t have to use the /api prefix. Any unrecognized request without a text/html accept header will be redirected to the specified proxy.

So it is indeed specific for development purposes and not for a production level use. This helps in working with the future, where there's this similar setup and avoids all the crazy localhost hacky architecture for gearing with the environment.

I wrote a blogpost detailing how to set this thing up - Using React's Proxy to get ahead of CORS & use HTTPS for API calls. Hope this helps.

@Amnahkhatun Then you may be able to access this way right: `.delete(\`/api/todos/${item.id}\`, item)` - This would totally solve the issue. — Praveen Kumar Purushothaman, May 24 '19 at 09:29
yes I have written in the same way. This is what I am getting in response tab : ``` {"detail":"CSRF Failed: CSRF token missing or incorrect."} ``` — The IT gal, May 24 '19 at 09:31
@Amnahkhatun Can you send a screenshot of the network tab contents using imgur? — Praveen Kumar Purushothaman, May 24 '19 at 09:32

score 0 · Answer 2 · edited Jan 24 '20 at 21:11

0

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

Please not that inorder to prevent automatic button submission, we need to write delete button as mention above

edited Jan 24 '20 at 21:11

Tiago Martins Peres

14,289
18
86
145

answered Jan 24 '20 at 20:38

Anoop K George

1,605
12
40

I am trying to delete items from TODO app using axios and django

2 Answers2