この記事の要点
Ajax で POST 通信する際の主要な注意点 5 つ CSRF トークン: Laravel など多くの FW でヘッダ送信必須 Content-Type: JSON か form-data かで指定が異なる CORS: クロスオリジンでは事前設定必要 エラーハンドリング: ネットワーク失敗・HTTP エラーを区別 非同期処理: Promise / async-await で適切に待つ

 

fetch API での基本

// JSON 送信
async function postJson(data) {
    const response = await fetch("/api/users", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
            "Accept": "application/json"
        },
        body: JSON.stringify(data)
    });

    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }

    return await response.json();
}

// 使用
postJson({ name: "Alice", email: "alice@example.com" })
    .then(result => console.log(result))
    .catch(error => console.error(error));

FormData（ファイル送信）

async function uploadFile(file) {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("description", "ファイル説明");

    const response = await fetch("/api/upload", {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": csrfToken
            // ⚠️ Content-Type は指定しない (FormData が自動でセット)
        },
        body: formData
    });

    return await response.json();
}

// HTML


document.getElementById("fileInput").addEventListener("change", (e) => {
    uploadFile(e.target.files[0]);
});

axios での書き方

// 基本的な設定
axios.defaults.headers.common["X-CSRF-TOKEN"] =
    document.querySelector('meta[name="csrf-token"]').content;
axios.defaults.headers.common["Accept"] = "application/json";

// POST (JSON)
try {
    const response = await axios.post("/api/users", {
        name: "Alice",
        email: "alice@example.com"
    });
    console.log(response.data);
} catch (error) {
    if (error.response) {
        // サーバ応答 (4xx, 5xx)
        console.error("Status:", error.response.status);
        console.error("Data:", error.response.data);
    } else if (error.request) {
        // ネットワークエラー
        console.error("No response");
    } else {
        console.error("Error:", error.message);
    }
}

// FormData (ファイル含む)
const formData = new FormData();
formData.append("file", fileInput.files[0]);
await axios.post("/api/upload", formData);
// axios も Content-Type を自動セット

jQuery での書き方

// $.ajax
$.ajaxSetup({
    headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
    }
});

// JSON 送信
$.ajax({
    url: "/api/users",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({ name: "Alice", email: "alice@example.com" }),
    dataType: "json",
    success: (data) => console.log(data),
    error: (xhr, status, error) => console.error(error)
});

// $.post (簡略形)
$.post("/api/users", { name: "Alice" })
    .done(data => console.log(data))
    .fail((xhr) => console.error(xhr.statusText));

CSRF トークン送信

Laravel

// HTML head に meta タグ


// JS で読み取り
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

// fetch
fetch("/api/users", {
    method: "POST",
    headers: { "X-CSRF-TOKEN": csrfToken, "Content-Type": "application/json" },
    body: JSON.stringify(data)
});

// axios はメタタグから自動読込

Spring Security

// thymeleaf テンプレート



// JS
const csrfToken = document.querySelector('meta[name="_csrf"]').content;
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content;

fetch("/api/users", {
    method: "POST",
    headers: { [csrfHeader]: csrfToken, "Content-Type": "application/json" },
    body: JSON.stringify(data)
});

CORS (クロスオリジン)

// 別ドメインへの POST
fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
    credentials: "include"  // Cookie 送信
});

// サーバ側 (Laravel)
// config/cors.php
'paths' => ['api/*'],
'allowed_origins' => ['https://myapp.example.com'],
'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'],
'allowed_headers' => ['*'],
'supports_credentials' => true,

// Spring Boot
@CrossOrigin(origins = "https://myapp.example.com", allowCredentials = "true")
@RestController
public class UserController { }

エラーハンドリング

// fetch では HTTP エラーは reject しない
async function postUser(data) {
    try {
        const response = await fetch("/api/users", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        });

        // HTTP エラー判定 (自動では throw しない)
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.message || `HTTP ${response.status}`);
        }

        return await response.json();

    } catch (error) {
        if (error.name === "TypeError" && error.message.includes("Failed to fetch")) {
            // ネットワークエラー
            alert("ネットワークエラー: 接続を確認してください");
        } else {
            // HTTP エラー or その他
            alert(`エラー: ${error.message}`);
        }
        throw error;
    }
}

タイムアウト設定

// fetch + AbortController
async function postWithTimeout(url, data, timeoutMs = 10000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);

    try {
        const response = await fetch(url, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
            signal: controller.signal
        });
        clearTimeout(timeoutId);
        return await response.json();
    } catch (error) {
        clearTimeout(timeoutId);
        if (error.name === "AbortError") {
            throw new Error("タイムアウト");
        }
        throw error;
    }
}

// axios
axios.post("/api/users", data, { timeout: 10000 })

リトライ機構

async function postWithRetry(url, data, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const response = await fetch(url, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            });

            if (response.ok) return await response.json();

            // 5xx の場合のみリトライ (4xx はクライアントエラー、リトライ無意味)
            if (response.status < 500) {
                throw new Error(`HTTP ${response.status}`);
            }
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            // 指数バックオフ
            await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));
        }
    }
}

ローディング表示・二重送信防止

let isSubmitting = false;

document.getElementById("submit-btn").addEventListener("click", async () => {
    if (isSubmitting) return;  // 二重送信防止
    isSubmitting = true;

    const btn = document.getElementById("submit-btn");
    btn.disabled = true;
    btn.textContent = "送信中...";

    try {
        const result = await postUser({ name: "Alice" });
        alert("成功");
    } catch (error) {
        alert("エラー: " + error.message);
    } finally {
        isSubmitting = false;
        btn.disabled = false;
        btn.textContent = "送信";
    }
});

よくあるトラブル

• 419 Page Expired: CSRF トークン不正
• 422 Unprocessable Entity: バリデーションエラー
• CORS エラー: 別ドメイン + サーバ側 CORS 未設定
• Mixed Content: HTTPS ページから HTTP API
• Content-Type 違い: JSON vs form-data の指定ミス
• Cookie 送信されない: credentials: "include" 必要

関連記事

• csrf_field
• CSVファイルダウンロード方法(Ajax)
• CSVファイルアップロード方法(Ajax)