Contact Form 7をREST API 経由でエラー415になった

React からREST API経由でContact Form 7 を利用していたのですが、エラーで415が返ってくるようになりました。

415は、以下のエラーとのこと。

HTTP 415 Unsupported Media Type クライアントエラーレスポンスコードは、ペイロードフォーマットがサポートされていないフォーマットであるため、サーバーがリクエストの受け入れを拒否することを示します。

MDN

原因は何だったかと言うとContact Form 7 5.6に「REST API: フィードバック作成リクエストの Content-Type ヘッダーが multipart/form-data ではない場合に 415 HTTP エラーステータスを応答する。」というアップデートがあった為でした。

今までは、Content-Typeは、application/x-www-form-urlencodedとなっていました。ということで、修正後のコードがこちら。

  const handleSubmit = () => {

    const endpoint = process.env.REACT_APP_endpoint_contact
    const params = new FormData()
    params.append('yourName', name)
    params.append('yourEmail', email)
    params.append('yourMessage', message)

    const axiosConfig = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }

    axios
      .post(endpoint, params, axiosConfig)
      .then((res) => {
        setResMessage(res.data.message)
        setResStyle(res.data.status)

        if (res.data.status === 'mail_sent') {
          setName('')
          setEmail('')
          setMessage('')
        }
      })
      .catch((error) => {
        console.error(error)
      })
  }

参考ページ

https://reiji1020.hatenablog.com/entry/2018/12/31/113202