如何通过使用 axios 访问 Web API GET 方法？答案

【问题标题】：How can I access to Web API GET method via using axios?如何通过使用 axios 访问 Web API GET 方法？
【发布时间】：2018-11-22 16:50:31
【问题描述】：

我尝试从 axios 对 asp.net core 2.1 webapi 进行 get api 调用

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

它通过了带有 json(application/json) body 的 Postman 测试

{

  "pick_province":"asda"
}

但是它无法从带有 VueJs 的 axios 运行并返回状态 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;
    },
}

【问题讨论】：

标签： asp.net-web-api vue.js asp.net-core axios

【解决方案1】：

您当前的操作方法参数用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 标头。你可以在axios上使用post方法。

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
})

上面的代码将进行一个 Http POST 调用，并在请求正文中发送您的数据。由于我们正在进行 POST 调用，请确保您的操作方法使用HttpPost 属性进行修饰。

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

【讨论】：