Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法

2018年4月9日 By KD コメントを書く

Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法

Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法

Expressでコーディングしているとたまに「Cannot set headers after they are sent to the client」と怒られることがあります。原因はお決まりのアレなのですが、今回は簡単なTipsとして紹介します。

見出し

  • 1 エラー事象
  • 2 問題のあるソースコード
  • 3 原因と対処法
  • 4 最後に
    • 4.1 関連記事

エラー事象

サーバーサイドに以下のエラーが出ています。

「(node:54370) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client」

内容としては「クライアント側へレスポンスを返却した後でなぜかヘッダーを設定するような処理をやろうとしているぞ」と怒られています。

問題のあるソースコード

例えば、ある1冊の本のデータを取得する場合に以下のようなソースコードを書いたとします。

  app.get('/api/books', auth, async (req, res) => {
    const bookId = req.query.id;

    try {
      const book = await Book.findById(bookId);
      if (!book) {
        res.status(404).json({
          error: {
              message: 'Not the book found.'
          }
        });
      }
      res.send(book);
    } catch (err) {
      res.status(400).json({
        error: {
            message: err.message
        }
      });
    }
  });

この時に対象の本のデータが無かった場合、先程のエラー事象が再現します。何が原因なのでしょうか?

原因と対処法

先程のソースコードをよく見ると、本のデータが無かった場合に404でレスポンスを返していますが、実はその後に取得した本のデータ(空)をレスポンスとして返そうとしています。別の言い方をすると、クライアント側に404で返却した後に、空のレスポンスを返却しようとしています。気づきましたか?まさにエラーメッセージの通りで、if文の処理をした際に処理を止めていないことが原因です。

つまり、対象の本が無いことを判定しているif文がそこで処理が終わるようにすれば解決します。

ソースコードを以下のように修正すればエラーは解決できます。

  app.get('/api/books', auth, async (req, res) => {
    const bookId = req.query.id;

    try {
      const book = await Book.findById(bookId);
      if (!book) {
        return res.status(404).json({
          error: {
              message: 'Not the book found.'
          }
        });
      }
      return res.send(book);
    } catch (err) {
      return res.status(400).json({
        error: {
            message: err.message
        }
      });
    }
  });

気づきにくいですが、分かってしまえば簡単な話ですね。これはExpressに限らず、NodeJSでコーディングしている場合、レスポンスを2回返そうとしていると類似のエラーメッセージが表示されますので、注意しましょう。eslintでは「consistent-return」というルールになっているので、eslintを使っていれば事前に注意してくれますよ。

最後に

いかがでしたか?今回は小さなTipsを紹介しました。Expressでコーディングするとたまに目にする事象なので覚えておくと対処が簡単になります。では。

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tool] MacでRubyとPythonとJavaとNodeとPerlの複数バージョンを管理する方法

    iPhone6sですか?予約しました、Keidです。 今月で20代ラストの年になってしまいました。30代が目前になるとい…

  • [tips][Perl] PerlでSQLplusからOracleのDBにアクセスする方法

    PerlにはDBIという便利なモジュールがあり、そのモジュールを使えばOracleのDBにアクセスることは簡単です。ただ…

  • 語学留学で必須!英語の文法用語一覧まとめ

    バンクーバーにしろセブにしろ海外の語学学校では授業は英語で行われます。英語を英語で教えるという若干不思議な環境ですが、文…

  • [tips][Windows] Windows Updateを一括で行う方法

    今日もう一台のPCを購入したとします。WindowsのOSをインストールしたら、まずインターネットに繋ぎます。次にするこ…

カテゴリ : 技術 Tips & Tutorials タグ : express, nodejs

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • 爆速でJenkinsをマスターしよう(メール通知編) ~ パイプラインのビルド失敗時にメールで通知する方法 ~
    爆速でJenkinsをマスターしよう(メール通知編) ~ パイプラインのビルド失敗時にメールで通知する方法 ~

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tool] MacでRubyとPythonとJavaとNodeとPerlの複数バージョンを管理する方法

    iPhone6sですか?予約しました、Keidです。 今月で20代ラストの年になってしまいました。30代が目前になるとい…

  • [tips][Perl] PerlでSQLplusからOracleのDBにアクセスする方法

    PerlにはDBIという便利なモジュールがあり、そのモジュールを使えばOracleのDBにアクセスることは簡単です。ただ…

  • 語学留学で必須!英語の文法用語一覧まとめ

    バンクーバーにしろセブにしろ海外の語学学校では授業は英語で行われます。英語を英語で教えるという若干不思議な環境ですが、文…

  • [tips][Windows] Windows Updateを一括で行う方法

    今日もう一台のPCを購入したとします。WindowsのOSをインストールしたら、まずインターネットに繋ぎます。次にするこ…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes