Ajaxがうまく動かない？よくあるトラブルの正体とは
「ボタンを押しても反応がない」「エラーは出ないけどデータが来ない」──
あなたはJavaScriptでAjax通信を使ったとき、こんな経験をしたことはありませんか？
Ajaxは非同期通信を可能にする強力な機能ですが、実際に使い始めるとつまずきやすいポイントが多いのも事実です。特に以下のような問題が多発します。
-
リクエストは送っているのにサーバーから返ってこない
-
CORSエラーでブロックされてしまう
-
サーバー側ではリクエストが届いていない
-
ヘッダーやボディの扱いが分からない
この記事では、こうしたAjax通信に関するトラブルの原因と対処法を、実例と共に徹底的に解説していきます。
Ajax通信の基本と構造を理解しよう
Ajaxとは？
Ajax（Asynchronous JavaScript and XML）は、ページを再読み込みせずに非同期でデータを送受信できる技術です。基本的には XMLHttpRequest または fetch() を使って実装します。
基本のAjaxコード（fetchの例）
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ userId: 123 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('通信エラー:', error));このコードでは、headers に Content-Type を指定し、body にはJSON形式のデータを送信しています。
headerとbodyの役割
-
headers：通信に関するメタ情報を渡します。例：認証トークン、データの種類（Content-Type）など。
-
body：POST・PUT時に送る実際のデータ本体。GETリクエストでは通常使用しません。
サーバーで受信できているかの確認方法
Node.js（Express）の例：
app.post('/data', (req, res) => {
console.log('受信データ:', req.body); // ここで確認
res.json({ message: 'OK' });
});開発環境で確認するには、サーバーログに出力したり、ブラウザの開発者ツール（ネットワークタブ）で通信内容を確認するのが効果的です。
うまく動かない時の原因と対処法
【よくあるエラー1】CORSポリシー違反
「Access to fetch at ‘https://api.example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy…」
このエラーを見たことはありませんか？
原因：
CORS（クロスオリジンリソース共有）ポリシーにより、異なるドメイン間の通信が制限されているため。
対処法（サーバー側）：
サーバーで適切なCORS設定を行います。
Node.js（Express + corsパッケージ）の例：
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:3000', // 許可するオリジン
credentials: true
}));【よくあるエラー2】ステータスコード200なのにデータが取れない
原因：
-
response.json() の前に response.ok を確認していない
-
サーバーがJSONではなくHTMLやテキストを返している
解決策：
fetch(url)
.then(response => {
if (!response.ok) throw new Error('HTTPエラー: ' + response.status);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));【よくあるエラー3】サーバーにデータが届いていない
原因：
-
Content-Type が不正
-
body が未設定または形式エラー
-
req.body を受け取るためのミドルウェア未使用
Expressでの対策：
app.use(express.json()); // JSONパース用これがないと、req.body は常に undefined になります。
もうAjax通信で迷わないために
Ajaxは一見シンプルに見えて、実はサーバーとの連携・CORS設定・データ形式といった複数の要素が絡み合っています。だからこそ、うまくいかない時には冷静に一つ一つ確認することが重要です。
チェックリストで復習しよう！
-
fetch の書き方は正しいか？
-
headerに Content-Type を入れているか？
-
bodyに正しくJSONを渡しているか？
-
サーバー側で req.body を扱える状態か？
-
CORSポリシーでブロックされていないか？
-
ネットワークタブでリクエストとレスポンスを確認したか？
【外部リンク】
【内部リンク】
JavaScriptでよく発生するエラー「ReferenceError」「SyntaxError」などの原因と対策を具体例付きで解説
