레일스 서버에 Axios를 사용하여 JSON 데이터를 올바르게 보내서 필요한 레일스 params와 정확히 일치시키는 방법은 무엇입니까?

Question

는 내가 레일 서버에 GET 요청을하고,과 같은 매개 변수가 보일 것입니다 : 내가 뷰에있는 프론트 엔드 응용 프로그램에서 요청을하고, 요청을 만들기위한 Axios의를 사용하고

{"where"=>{"producer_id"=>["7"]} 

. 그러나

const data = await this.axios.get('http://localhost:3000/data.json', { 
    headers: { 
    'X-User-Token': this.$store.getters.authToken, 
    'X-User-Username': this.$store.getters.user.username 
    }, 
    params: { 
    where: { 
     producer_id: data.producers 
    } 
    } 
}) 

, 레일 서버 출력에가 PARAMS 이렇게 전송 된 것을 보여준다 :

{"where"=>"{\"producer_id\":[\"7\"]}"} 

을 그리고 난 다시 때문에 정확한 데이터를 얻을 수없는이 같은 요청을 만드는 중이라서 그것의.

어떻게 해결할 수 있습니까? params (where 개체)의 두 번째 수준이 문자열로 전송되는 이유는 무엇입니까?

지금이다 :

Answer 1

이 경우에는 PARAMS이

https://github.com/axios/axios/issues/738 내가이

const data = await this.axios.get('http://localhost:3000/data.json', { 
    headers: { 
    'X-User-Token': this.$store.getters.authToken, 
    'X-User-Username': this.$store.getters.user.username 
    }, 
    params: { 
    where: { 
     producer_id: data.producers 
    } 
    }, 
    paramsSerializer: function (params) { 
    return jQuery.param(params) 
    } 
}) 

편집을 극복 할뿐만 아니라 paramsSerializer 기능을 사용 직렬화 할 필요가 있음을 밝혀 jQuery 대신 qs 사용 :

axios.defaults.paramsSerializer = (params) => { 
    return qs.stringify(params, {arrayFormat: 'brackets'}) 
}