axiosでPOST requestを送信をするとmethodがOPTIONSになってしまう問題の解決

問題

フロントはReact18.2.0、Next.js13.2.1、APIはGo言語1.20で開発していました。
axiosでPOST requestをGoのAPIに送信した際にMethodがOPTIONSになってしまって、APIからレスポンスが返ってこなかった。

原因

axiosのContent-Typeのデフォルトはapplication/jsonを使っていて、それが原因でAPI側ではMethodがOPTIONSと認識されてしまっていた。
ちなみにjQueryはデフォルトでapplication/x-www-form-urlencodedを使っています。

参考

解決策

以下のようにContent-Typeをapplication/x-www-form-urlencodedに変更する。

Copied!

    axios
      .post(
        `${process.env.NEXT_PUBLIC_API_URL}/signup`,
        {
          name,
          email,
          password,
        },
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      )