【JavaScript】axios(ajax)でエラー時のレスポンスbodyが取得できない

はじめに

盲点だったのでメモ。
フロントからRailsのAPIへpostしてエラーになった際、詳細なメッセージをresponseボディに入れて返したかった。

##Ruby on Rails

if user.save
  render json: { status: 200, data: user }
else
  render  status: :unprocessable_entity, json:{ messages: user.errors.full_messages }
end

JavaScript

axios
  .post(process.env.API_URL + '/api/v1/users/signup')
  .then((res) => {
    console.log(res)
   })
  .catch((e) => {
    console.log(e)
   })

結果

Error: Request failed with status code 422
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:69)

エラーのレスポンスbodyが取れない、、、

対処法

railsのエラーの返し方がいけないのかと思って詰まっていたが、問題はフロントだった。
エラーのresponseには以下のようにアクセスできる

  .catch((e) => {
    console.log(e.response.data.messages)
   })

200の時はObjectを返してくれるのに、、、

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

まとめ

不得意だからと矛先をバックエンドに向けてしまっていたが、フロントの実力もまだまだだった。。。
壁に当たった時は、一旦決めつけを捨てて、原因を一つ一つ丁寧に探っていくべきだと改めて感じました。