Qfyilyi

I try a get api call to asp.net core 2.1 webapi from axios

webapi controller

    [Route("api/[controller]")]

    [ApiController]

    [HttpsRequirement(SslRequirement.Yes)]

    public class GHTKController : ControllerBase

    {

        [HttpGet("GetShippingFee")]

        [Produces("application/json")]

        public async Task<IActionResult> GetShippingFee([FromBody]GhtkAddress address)

        {



            return Ok();

        }

    }

It passed the test with Postman with json(application/json) body

{



  "pick_province":"asda"

}

However it failed to run from axios with VueJs and return status 400

import axios from 'axios'

    export default {

    async getShippingFee(address) {

      console.log(address)

        const request = await axios.get('/api/ghtk/getshippingfee', {

            pick_province: "asda"

        })

            .then(response => response)

            .catch(error => {

                console.log(error)

            });

        return request;

    },

}

Your current action method parameter is decorated with the FromBody attribute. This tells the model binder that it should read the data from the request body and do the mapping during the model binding process. But from your client side code,you are making a GET call, in which your data will be sent in the request URL as query string parameters. If you inspect your network call you can see it like below

/api/ghtk/getshippingfee?pick_province=asda

Since you are making a GET call, you should use the FromQuery attribute. The FromQuery attribute tells the model binder to read the data from the request querystring and do the mapping.

[HttpGet("GetShippingFee")]

[Produces("application/json")]

public async Task<IActionResult> GetShippingFee([FromQuery]Profile address)

{

    return Ok(address);

}

Or

If you want to send a complex object, consider making a POST call from client side code. You need to convert your complex JavaScript object to it's JSON string version and send that as the data for the POST call. Make sure you are specifying application/json as the Content-Type header for the call. You can use the post method on axios.

const url = '/api/ghtk/getshippingfee';



const ajaxHheaders = {

    'Content-Type': 'application/json',

};



let data = JSON.stringify({

                            pick_province: "redmond",

                            first_name: "shyju"

                          });



const request = await axios.post(url, data, {

    headers: ajaxHheaders

})

The above code will make an Http POST call and send your data in the request body. Since we are making a POST call, make sure your action method is decorated with HttpPost attribute.

[HttpPost("GetShippingFee")]

[Produces("application/json")]

public async Task<IActionResult> GetShippingFee([FromBody]Profile address)

{

    return Ok(address);

}