net::ERR_CONNECTION_REFUSED の原因と解決策

概要

net::ERR_CONNECTION_REFUSED は、ブラウザがサーバーに接続しようとしたが、サーバー側で接続を拒否された場合に発生するエラーです。Fetch APIやXHRリクエストで頻繁に見られます。

エラーメッセージ

GET http://localhost:3000/api/data net::ERR_CONNECTION_REFUSED

Failed to load resource: net::ERR_CONNECTION_REFUSED

TypeError: Failed to fetch
    at fetch (...)

DevToolsのConsoleに表示されます。

原因

1. サーバーが起動していない

最も一般的な原因です。

1
2
3
# サーバーが起動しているか確認
curl http://localhost:3000
# curl: (7) Failed to connect to localhost port 3000: Connection refused

2. ポート番号が間違っている

サーバーが別のポートで起動している場合です。

1
2
3
4
5
// フロントエンド: ポート3000にリクエスト
fetch('http://localhost:3000/api/data')

// バックエンド: 実際はポート8080で起動
app.listen(8080, () => console.log('Server running on 8080'));

3. ファイアウォールによるブロック

ファイアウォールが接続をブロックしている場合です。

4. サーバーがlocalhost以外でリッスン

サーバーが 127.0.0.1 ではなく特定のIPでのみリッスンしている場合です。

1
2
3
4
5
// 問題: 特定IPのみでリッスン
app.listen(3000, '192.168.1.100');

// 解決: すべてのインターフェースでリッスン
app.listen(3000, '0.0.0.0');

解決策

1. サーバーの起動確認

1
2
3
4
5
6
7
8
9
# プロセス確認
lsof -i :3000
# または
netstat -an | grep 3000

# サーバー起動
npm run dev
# または
node server.js

2. 正しいポートを使用

1
2
3
4
// 環境変数でポートを統一
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';

fetch(`${API_URL}/api/data`)

3. CORS設定も確認

サーバーが起動していてもCORSエラーと組み合わさる場合があります。

1
2
3
4
5
// Express.js
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:5173'
}));

4. Docker環境での注意

コンテナ内からホストにアクセスする場合は localhost ではなく host.docker.internal を使用します。

1
2
// Docker内からホストのAPIにアクセス
fetch('http://host.docker.internal:3000/api/data')

5. プロキシ設定（開発環境）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

1
2
3
4
// package.json (Create React App)
{
  "proxy": "http://localhost:3000"
}

デバッグ手順

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# 1. サーバープロセス確認
ps aux | grep node

# 2. ポート使用状況確認
lsof -i :3000

# 3. 直接接続テスト
curl -v http://localhost:3000

# 4. ファイアウォール確認（macOS）
sudo pfctl -s rules

# 5. ファイアウォール確認（Linux）
sudo iptables -L

net::ERR_CONNECTION_REFUSED

概要