Question

我尝试从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）正文的邮递员通过了测试

{

  "pick_province":"asda"
}

但是它无法从带有VueJ的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;
    },
}

Answer 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调用，因此请确保您的action方法使用HttpPost属性修饰。

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

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

1 个答案: