React axios post에서 Web API HttpPost 메서드의 데이터를받을 수 없습니다.

Question

내 Web API Post 메서드는 Swagger에서 잘 작동하지만 axios를 사용하여 React App에서 게시 요청을 보내면 데이터 [FromBody]가 null입니다. 다음은 Web API 방법입니다.

[HttpPost]
[Route("api/employee/addMany")]
public IHttpActionResult Post([FromBody] dynamic data)  //my axios request hit this method but data is always null. I have tried passing without stringifying
  {
   Employee[] employees=JObject.Parse(data);
   //doing some stuff with employees
   return Ok();
  }

그리고 여기 Axios 포스트 요청 코드가 있습니다.

export function addEmployees(employees:Employee[]) {
  return axios.post(`api/employee/addMany`, { employees });
}

그리고 여기에 요청 인터셉터가 있으며, 모델 키 파스칼 화 및 데이터 문자열 화를 수행합니다.

const pascalizeKeys = (obj:any):any => {
  if (Array.isArray(obj)) {
    return obj.map(v => pascalizeKeys(v));
  } else if (obj !== null && obj.constructor === Object) {
    return Object.keys(obj).reduce(
      (result, key) => ({
        ...result,
        [String(upperFirst(key))]: pascalizeKeys(obj[key]),
      }),
      {},
    );
  }
  return obj;
};

export function applyInterceptors(Axios:typeof axios){
  Axios.interceptors.request.use((request)=>{
    if(request.data){
      request.data = JSON.stringify(pascalizeKeys(request.data));
      return request;
    }
    return request;
  }
  )
}

Answer 1

axios 포스트를 작동시키기 위해 시도 할 사항 :

1. 헤더 설정

headers: {
          'content-type': 'application/json',
     }

1. 요청 의 data또는 params필드에 json을 첨부하십시오.

2. 그래도 데이터를 가져올 수 없다면 formData대신 데이터 필드에 새 데이터로 보내십시오.

let formData = new FormData()

formdata.append('name', yourJson)

await axios({
  method: 'post',
  url: '/your/url',
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})

지금 요청과 함께 가져와야합니다.