Reactで異なるオリジンのAPI叩いたら404が返ってきた時の対処法

フロントはTypeScriptとReact、バックエンドはNodeで書いていて、このサーバーはAPI用のものとしてフロントを返すサーバーとは別のもの、という構成で作っていた。

具体的には

フロントのページ返すサーバーが localhost:3000

APIサーバーが localhost:4000

といった感じ。

この状況でReactからaxiosを使いAPIサーバーを叩いた。

const origin = "http:/localhost:4000";
const baseUrl = `${origin}/api/v1`;

// 404エラー
await axios.post(
          `${baseUrl}/users`,
          { name },
        );

これだと "http:/localhost:3000/localhost:4000" にリクエストが送られてしまってエラーになっていた。

対処法
package.jsonに proxy を設定する

create-react-app.dev

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json

{
...
"proxy": "http://localhost:4000"
}

こうした後にソースコードも変更

const baseUrl = `/api/v1`;

await axios.post(
          `${baseUrl}/users`,
          { name },
        );

いったんフロント返す側のサーバダウンさせてタブも消す。その後再び yarn start で立ち上げたら無事叩けるようになった。

なぜaixosでURLを指定しても "http:/localhost:3000/localhost:4000/~" にリクエストされてしまったのか具体的な部分は不明。
ReactNativeではエラー出なかったのでReactの設定だとは思う。