React DELETE method not allowed

Question

I have a dotnet core 3.1 API and a React app.

When i do a DELETE request with the React app, I get a method not allowed (405).

DelBiere.tsx:45 DELETE https://localhost:44339/api/v1/biere 405

and also

4:1 Uncaught (in promise) SyntaxError: Unexpected token S in JSON at position 0.

But when I use Postman, everything is works.

Also, GET and POST request works with the React app.

I do not have WEBDAV install on IIS.

I have a web.config file like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="AspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" requireAccess="Script" />
    </handlers>

    <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false" />
  </system.webServer>
</configuration>

My react handler function look like this:

handleSubmit(event: any) {
  fetch('https://localhost:44339/api/v1/biere', {
    method: 'DELETE',
    headers : {      
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body:JSON.stringify(this.id)
  })
    .then((res) => console.log(res.json(), "res"))
    .then((data) =>  console.log(data, "data"))
    .catch((err)=>console.log(err, "err"));
  event.preventDefault();
}

Thanks for your help!

Chouinard Chouinard · Accepted Answer · 2020-03-29T18:20:54

The problem was that I add this.id in the body property of the fetch function like this : body:JSON.stringify(this.id)

But my API endpoint required the id in the URL.

[HttpDelete("{id:int}")]
public async Task<IActionResult> Delete(int id)
{
    //Some code
}

This is how I solved the problem.

handleSubmit(event: any) {
    const url = 'https://localhost:44339/api/v1/biere/' + this.id;

    const options = {
        method: 'DELETE',
        headers : {      
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    }

    fetch(url, options)
        .then((res) => console.log(res.json(), "res"))
        .then((data) => console.log(data, "data"))
        .catch((err) => console.log(err, "err"));

    event.preventDefault();
}

React DELETE method not allowed

1 Answers