尝试将多个 arguments 传递给带有 axios 的 React 中的 get 请求时出现 415 错误

Question

This might be easy (or hard) to answer, I'm new to react but haven't found a solution to my problem.

I made an api that looks like this:

[HttpGet]
[Route("GetDateRange")]
public IActionResult GetDateRange(DateRangeModel model)
{
 ...
}

So it takes in a DateRangeModel object. This object simply looks like this:

public class DateRangeModel
{
    public int PlayerId { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

Now on the frontend, in react, I always seem to get a 415 (unsupported media error) no matter how I try to pass in the values. Here is my latest attempt with some hardcoded values:

var body = {
    playerId: 2, 
    startDate: '2020-01-01',
    endDate: '2020-03-03'
};

var myJson = JSON.stringify(body);

const result = await axios.get('http://localhost:64390/api/players/getdaterange/', myJson);
console.log(result);

When I enter this in the body in Postman it works perfectly and I get the 200 OK message along with the correct json response:

{
    "playerId": 2,
    "startDate": "2020-01-01",
    "endDate": "2020-03-03"
}

Thank you for any help.

Answer 1

Well, because you are sending data to server you will have to use a post request. Right now you are using axios.get and you will need to replace it with axios.post. And you don't even need to use JSON.stringify method to parse the object into a string before axios.post method. Let me give a demonstration;

axios.post('http://localhost:64390/api/players/getdaterange/', {
    playerId: 2, 
    startDate: '2020-01-01',
    endDate: '2020-03-03'
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

And you would need to handle this request on your server with a post request handler.