Как я могу получить доступ к GET-методу Web API через axios? - PullRequest
Новая
       28

Как я могу получить доступ к GET-методу Web API через axios?

0 голосов
/ 22 ноября 2018

Я пытаюсь получить вызов API api в asp.net core 2.1 webapi от axios

контроллер webapi 

    [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();
        }
    }

Он прошел тест с Postman с телом json (application / json) 

{

  "pick_province":"asda"
}

Однако не удалось запустить из axios с VueJs и вернуть статус 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;
    },
}

1 Ответ

0 голосов
/ 22 ноября 2018

Ваш текущий параметр метода действия украшен атрибутом FromBody.Это сообщает связующему модели, что он должен прочитать данные из тела запроса и выполнить сопоставление в процессе связывания модели.Но из вашего клиентского кода вы делаете вызов GET, в котором ваши данные будут отправляться в URL-адресе запроса в качестве параметров строки запроса.Если вы проверяете свой сетевой вызов, вы можете увидеть его, как показано ниже 

/api/ghtk/getshippingfee?pick_province=asda

Поскольку вы делаете вызов GET, вы должны использовать атрибут FromQuery.Атрибут FromQuery указывает связующему модели прочитать данные из строки запроса и выполнить сопоставление. 

[HttpGet("GetShippingFee")]
[Produces("application/json")]
public async Task<IActionResult> GetShippingFee([FromQuery]Profile address)
{
    return Ok(address);
}

или

Если вы хотите отправитьсложный объект, рассмотрите возможность вызова POST из кода на стороне клиента.Вам необходимо преобразовать ваш сложный объект JavaScript в его строковую версию JSON и отправить его в качестве данных для вызова POST.Убедитесь, что вы указали application/json в качестве заголовка Content-Type для вызова.Вы можете использовать метод post для 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
})

Приведенный выше код выполнит вызов POST Http и отправит ваши данные в теле запроса.Поскольку мы выполняем вызов POST, убедитесь, что ваш метод действия имеет атрибут HttpPost. 

[HttpPost("GetShippingFee")]
[Produces("application/json")]
public async Task<IActionResult> GetShippingFee([FromBody]Profile address)
{
    return Ok(address);
}
...