[ASP.NET Core] axios 로 Array 형식의 파라메터를 전달하는 Get 메소드 사용시 유의사항

회사에서 WebAPI + Vue 조합으로 사내 서비스를 개발하던 중, Get 형식으로 javascript array 형식의 파라메터를 전달할 때 파라메터를 제대로 인식하지 못해 애먹었던 일이 있었다.

 

다른 파라메터는 잘 되는데 유독 배열만 값이 전달되지 않아 브라우저의 개발툴>Network 에서 전달되는 URL의 형식을 확인하게 되었다.

 

URL 전체주소는 아래와 같다.

 

http://localhost:8080/api/values?numbers[]=1&numbers[]=2&numbers[]=3&numbers[]=4&numbers[]=5

 

확인결과 파라메터 이름에 "[]"가 붙어서 전달되었기 때문에, 소스코드에서 "numbers" 란 이름으로 매칭되어야 하는 서버측 코드에선 인식이 안되었던 것이다.

 

수정 전 소스코드는 아래와 같다.

 

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
  // GET: api/<ValuesController>
  [HttpGet]
  public IEnumerable<int> Get([FromQuery] IEnumerable<int> numbers)
  {
  	return numbers.Select(v => v + 100);
  }
}

 

정상적인 인식을 하기위해선 FormQuery 부분을 아래와 같이 수정해야 한다.

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
  // GET: api/<ValuesController>
  [HttpGet]
  public IEnumerable<int> Get([FromQuery(Name = "numbers[]")] IEnumerable<int> numbers)
  {
  	return numbers.Select(v => v + 100);
  }
}

 

혹시 axios만의 문제인가 싶어 서버쪽 소스코드를 NodeJS 로 바꿔보았다.

 

별다른 변경 없이 잘되는 NodeJS 기반 webAPI 예시

따로 신경쓸거 없이 잘 되는걸 확인할 수 있었다.

인생 편히 살고싶다면 .NET을 손절해야하지 않을까 싶다.

 

PS. Array를 변환없이 Get 방식 그대로 전달해서 쓰면 URL이 너무 길어질 수 있기 때문에 상황에 따라 변환이 필요할 수 있다.