More than 3 years have passed since last update.

【React】axiosでリクエストしたとき、400(Bad Request)が発生した際の対処法【axios】

Posted at 2021-05-25

症状

Reactでaxiosを使用して、RailsAPIにアクセスしようとしたときに、400(Bad Request)が発生してしまいました。 railsAPI側のログをみると、アクセスしたいactionまで届いていそうではありますが、上手く動作していないようです。

エラー

PUT http://localhost:3000/hoges/undefined 400 (Bad Request)

axiosのコードでアクセスしていた箇所はこんな感じです。

accessPutjsx

export const url= (id) => `http://localhost:3000/hoges/${id}`;

export const accessPut() {
    hoge.id = 1
    axios.put(url(hogee.id))
}

今回はurlに設定するパラメータがミスっていたため、undefindedをそのまま送っていたため、エラーが発生していましたパラメータをちゃんとurl側に送って、それを正しいurlでアクセスしたら、エラーが解消しました

accessPut.jsx

export const url= (id) => `http://localhost:3000/hoges/${id}`;

export const accessPut() {
    hoge.id = 1
    axios.put(url(hoge.id))
}