APIのパスが存在しているのに404errorになる

Question

現在 React + Rails でアプリケーションを作成しております。
一通りAPIを作成後フロントの開発を行っているのですが,axiosで叩くとなぜか404errorになってしまいます。

APIのテストは「Talend API Tester」を用いて行っており、正常に動くことを確認しています。

もちろん他のAPIはaxiosで叩いてもちゃんと動作はしております。

herokuのログを見ると

2020-04-09T04:35:32.260847+00:00 heroku[router]: at=info method=OPTIONS path="/api/v1/ideas" host=idea-stocker-api.herokuapp.com request_id=a5b8260e-edd8-45ff-99b6-310459fb15be fwd="115.179.118.132" dyno=web.1 connect=1ms service=2ms status=200 bytes=307 protocol=https
2020-04-09T04:35:32.569499+00:00 heroku[router]: at=info method=POST path="/api/v1/ideas" host=idea-stocker-api.herokuapp.com request_id=cecacc57-c784-4212-b869-3a6b70aefbf6 fwd="115.179.118.132" dyno=web.1 connect=0ms service=115ms status=404 bytes=369 protocol=https
2020-04-09T04:36:10.514433+00:00 heroku[router]: at=info method=POST path="/api/v1/ideas" host=idea-stocker-api.herokuapp.com request_id=3067d413-fd6e-4260-b680-bef54606b12c fwd="115.179.118.132" dyno=web.1 connect=1ms service=91ms status=200 bytes=1007 protocol=https

となっており,methodやpathは間違っていないと思います。(上記二つがフロントから,最後のがAPI Testerから叩いたもの)
OPTIONSのところが気になりますが、他のAPIでも同様で、そちらの方はしっかりPOST送信が成功しています

下記に該当部分のコードを記載させていただきます

def create
  idea = Idea.new(idea_params[:idea])
  tag_update(idea, idea_params)
  if idea.save
    render :json => idea, :serializer => IdeaSerializer
  else
    render status: 400, :json => { status: "400", message: "validate error" }
  end
end

  const postIdea = async () => {
    console.log(addData);
    // なぜか404 error API testerではうまくいく
    await axios
      .post('/api/v1/ideas', addData)
      .then(res => {
        //処理
      })
      .catch(err => console.log(err));
  }

どなたかご教授くださると幸いです。どうぞよろしくお願いします。

Comments

[jun68ykt]

console.log(addData);
のデバッグログはどのように表示されていますでしょうか？

[yuki_yuki_yukia]

期待通りのデータが入っております

```
{
"idea": {"icon": "????", "user_id": 2, "title":"new_idea_title11", "detail":"new_idea_detail","priority": 3},
"idea_tags": [{"id": 1}, {"id" :2}],
"genre_tag": {"id": 1}
}
```

このような形です

[jun68ykt]

ご質問の内容から、Talend API Tester　から上記のJSONをPOSTしたときは、うまくいって、axios からだとうまくいかない、ということと思いました。ひとつ原因特定のため掘ってみるとよいかもと思うのは、バックエンドのほうは、うまくいかないとき 400 を返しているのに、404 なんですよね？　ひょっとして
.catch(err => console.log(err));
のエラーログの中にヒントがあるのでは？という気がしました。そこはいかがでしょうか？

[yuki_yuki_yukia]

ありがとうございます。

err のログも同様のため記載しておりませんでしたが
こちらのconsole.log(err)も404error になっています