まず結論
404、500、CORS、Mixed Content は、どれも「通信で失敗している」ように見えますが、原因の場所が違います。
| 表示 | 主な意味 | 見る場所 |
|---|---|---|
| 404 | URLに対応するものがない | Network |
| 500 | サーバ内部でエラー | Network / サーバログ |
| CORS | ブラウザが別オリジン通信を止めた | Console / Network |
| Mixed Content | HTTPSページからHTTPを読もうとした | Console / Network |
同じ赤いエラーでも、確認すべき場所が違います。
404 Not Found
404は、指定したURLに対応するリソースが見つからない状態です。
例:
GET /images/logo.png 404
よくある原因:
- パスの打ち間違い
- ファイルが存在しない
- 大文字小文字が違う
- デプロイ時にファイルが含まれていない
- ルーティング設定が合っていない
静的サイトでは、画像やCSS、JavaScriptのパス違いでよく出ます。
500 Internal Server Error
500は、サーバ側で予期しないエラーが起きた時の状態です。
例:
GET /api/users 500
404は「見つからない」ですが、500は「サーバは受け取ったが内部処理で失敗した」という意味です。
よくある原因:
- サーバコードの例外
- DB接続エラー
- 環境変数不足
- 外部APIエラー
- 想定外の入力
500はブラウザだけでは原因が分からないことが多いです。サーバログやAPI側のログを確認します。
CORS
CORSは、ブラウザのセキュリティ制約です。
たとえば、https://app.example.com から https://api.example.com へAPI通信すると、オリジンが違います。この時、API側が許可していないとブラウザがレスポンス利用を止めます。
Consoleでは次のようなエラーが出ます。
Access to fetch at ... has been blocked by CORS policy
CORSは、APIがまったく動いていないとは限りません。サーバがレスポンスを返していても、ブラウザが「このページから読むことは許可されていない」と判断して止めることがあります。
Mixed Content
Mixed Contentは、HTTPSのページからHTTPのリソースを読み込もうとした時に起きます。
https://example.com
-> http://example.com/image.png
HTTPSページの中にHTTPが混ざると、通信が安全でなくなるため、ブラウザがブロックすることがあります。
よくある原因:
- 画像URLが
http://のまま - API URLが
http://のまま - 古い埋め込みタグを使っている
- 開発環境のURLを本番に残している
切り分け順
DevToolsを開いたら、次の順で確認します。
- Consoleでエラー文を見る
- Networkで該当リクエストを見る
- Status Codeを見る
- Request URLを見る
- ResponseやHeadersを見る
| 症状 | 最初に疑うこと |
|---|---|
| 404 | URL・パス・ファイル存在 |
| 500 | サーバ処理・ログ |
| CORS | API側の許可ヘッダー |
| Mixed Content | http/httpsの混在 |
実践メモ: エラー文を検索する前に、まず「どのURLに何を取りに行って、何番で失敗したか」を確認します。
まとめ
404は見つからない、500はサーバ内部エラー、CORSはブラウザの別オリジン制約、Mixed ContentはHTTPSとHTTPの混在です。
見た目は似ていても、原因の層が違います。ConsoleとNetworkを組み合わせて、URL、status、headersを確認する癖をつけると調査が速くなります。
