Failed with code 405 when using axios to make a call to controller api in asp.net core react application

Question

I am working on a simple react + asp.net core application where I want to simply add records to the database (created using entityframework core). There is a very simple form with just a textbox and a button. When clicking the button, I receive the following error:

Error: Request failed with status code 405

I did debugging in runtime, and the Create method in the controller class is not evoked. That is, somehow the axios does not recognize the url provided. Below is the client side code:

class Form extends Component {

    state = { rubricName: '' }

    handleFormSubmit = (event) => {
        event.preventDefault();           

        axios({
            method: 'post',
            url: 'api/Rubric/Create',
            data: {
                title: this.state.rubricName,
            },
            headers: {
                'Content-Type': 'text/plain;charset=utf-8',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
            },
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            console.log(error);
        });

Here is the controller api class:

[Route("api/[controller]")]
public class RubricController : Controller
{
    RubricDataAccessLayer objRubric = new RubricDataAccessLayer();


    [HttpPost]
    [Route("api/Rubric/Create")]
    public int Create(string title)
    {
        return objRubric.AddRubric(new Rubric { Title = title });
    }
}

Any ideas about why I am having this error?

It sounds like it might be a CORS issue - is it an OPTIONS request that's actually being sent and getting that 405? With [Route(...)] commented-out, the endpoint would be just api/Rubric. — Kirk Larkin
– Kirk Larkin, Commented Apr 2, 2019 at 20:03
@KirkLarkin thanks for the comment! I have uncommented [Route()] also set 'Access-Control-Allow-Origin to *. Still no luck... Any further ideas? — renakre
– renakre, Commented Apr 2, 2019 at 22:14
@renakre If you have both Route attribute the resulting url is following api/Rubric/api/Rubric/Create. — Oleksandr
– Oleksandr, Commented Apr 2, 2019 at 22:36
@Alexander that is correct, thanks a lot! would you like to post this as an answer so that I can mark? — renakre
– renakre, Commented Apr 3, 2019 at 6:03

Oleksandr · Accepted Answer · 2019-04-03 11:22:49Z

2

You have specified incorrect url in request. If there is only one Route attribute on controller the url should be

api/Rubric

If you keep both urls the resulting url is combined value of Route attributes

api/Rubric/api/Rubric/Create

If you want to override action url without combining it with controller one just add leading / (or ~/)

[HttpPost]
[Route("/api/Rubric/Create")]
public int Create(string title)

In this case request url should be

api/Rubric/Create

edited Apr 3, 2019 at 11:22

answered Apr 3, 2019 at 11:07

Oleksandr

9,7601 gold badge22 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Failed with code 405 when using axios to make a call to controller api in asp.net core react application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related