Network Error の原因と解決策

概要

AxiosでNetwork Errorは、HTTPリクエストがサーバーに到達できなかった場合に発生します。CORSエラーもこのメッセージで表示されることがあります。

エラーメッセージ

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

原因

サーバーがダウン: APIサーバーが応答しない
CORSエラー: クロスオリジンリクエストがブロック
ネットワーク切断: インターネット接続なし
URLの間違い: 存在しないエンドポイント

解決策

1. CORSを確認

1
2
3
4
5
6
// サーバー側（Express）
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

2. ベースURLを確認

1
2
3
4
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

3. エラーハンドリングを追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
try {
  const response = await axios.get('/api/data');
} catch (error) {
  if (error.message === 'Network Error') {
    console.log('サーバーに接続できません');
  } else if (error.response) {
    console.log('サーバーエラー:', error.response.status);
  } else if (error.request) {
    console.log('レスポンスなし');
  }
}

4. リトライロジックを実装

1
2
3
4
5
6
7
8
9
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return error.message === 'Network Error';
  }
});

5. タイムアウトを設定

1
2
3
4
5
6
axios.get('/api/data', { timeout: 5000 })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('タイムアウト');
    }
  });

概要

エラーメッセージ

原因

解決策

1. CORSを確認

2. ベースURLを確認

3. エラーハンドリングを追加

4. リトライロジックを実装

5. タイムアウトを設定

JavaScript の他のエラー