localhost:8080 に接続ができない。

Question

動画教材を見ながら、サンプルアプリを開発しています。

教材に則って、webpack-dev-server でローカルにサーバーを立ち上げて確認をしています。
コマンドをうちこみ、サーバーを立ち上げたときに、

Project is running at http://localhost:8080/

と出てくるので、chromeからアクセスしようとするのですが、

このページは動作していません

localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE

との結果が表示されてしまいます。
こちらはSafariでも同様の結果が返ってきていることを確認しました。

ですが、127.0.0.1:8080であればアクセスできていることを確認できました。

これをlocalhostでもアクセスできるようにしたいです。
恐らく、過去の自分がローカル環境を変更したのかと思っているのですが、どこをいじったかは分かっておりません。
また、こういったトラブルが起こった際の、適切な問題の切り分け手順が分かっていないです。

是非ご教示頂けますと幸いです。

宜しくお願いいたします。

Answer 1

localhostだとNGだけど127.0.0.1だとOK、ということは、localhostの設定が怪しいということですよね。
macOSであれば、ターミナルから、

dig localhost +short

でlocalhostが指すIPアドレスが分かります。これが127.0.0.1になっていなければ変な設定がされています。

more /etc/hosts

などと実行して調べてみるとよいかもです。

digコマンドは何かと重宝するので、オプションの設定なども含め、一度調べてみるとよいでしょう。

Comments

[azuk1]

ご回答ありがとうございます！

dig で調べてみたのですが、127.0.0.1 に設定されていました。
ここには問題無いという認識で大丈夫でしょうか...?

[takahashim]

なんと、そうなんですか。ということは名前の問題じゃないんですかね。
ではcurlを使って、

curl http://localhost:8000/
curl http://127.0.0.1:8000/

でアクセスしてみるとどうでしょうか？

[takahashim]

もしかすると、アンチウイルスソフトのせいかもしれませんね。「ERR_EMPTY_RESPONSE localhost」で検索したところ以下のサイトが出てきました。
https://qiita.com/enzirion/items/3af4afc906604da93c20
https://miz2403.com/err_empty_response/

[azuk1]

もろもろありがとうございます...！！
まず、curlのほうですが、
❯ curl http://localhost:8080/
curl: (52) Empty reply from server
となり、
❯ curl http://127.0.0.1:8080
では、サンプルアプリのコードが表示されました！

アンチウイルスソフトは確かに入っています...！(ESET)
そっちの線で調査してみます！
ありがとうございます！！

[takahashim]

なるほどー。curlでも同様ということであればブラウザのせいではないですよね。ESETが怪しそうです。

[azuk1]

仰る通り、ESETが原因でした...
ここまで影響範囲があるのですね...勉強になりました。

また、トラブルシューティングの方法や手順までご教示頂きありがとうございました！

[takahashim]

解決できてよかったですね！ESETだとなかなか気づけないですよね…。