Kenapa Cara Mengatasi Fetch Authorization Header Gagal Javascript Sering Salah Sasaran?

Ditulis oleh JavaScript

Cara mengatasi fetch Authorization header gagal javascript paling sering salah sasaran karena token tidak dikirim, bukan karena fetch rusak. Cek dulu isi token sebelum fetch berjalan, pastikan formatnya Bearer spasi token, lalu periksa status respons di DevTools Network. Kalau header tidak muncul di request, masalahnya di frontend. Kalau header terkirim tapi 401, masalahnya token kedaluwarsa atau ditolak server.

Penyebab Authorization Header Tidak Terkirim atau Ditolak

Fetch tidak otomatis menambahkan auth. Semua kegagalan hampir selalu berasal dari empat titik ini:

  • Token null atau kedaluwarsa karena diambil dari localStorage setelah logout, salah nama key, atau menyimpan objek tanpa JSON.parse.
  • Format Bearer salah, misalnya tanpa kata Bearer, tanpa spasi, nama header ditulis authorisation, atau objek headers tertimpa.
  • CORS dan preflight memblokir header custom di browser ketika server tidak mengizinkan Authorization.
  • Endpoint salah metode atau server menuntut auth berbeda, misalnya memakai cookie session bukan Bearer.

Tabel Diagnosis Fetch Authorization Header Gagal

Bedakan jenis gagalnya sebelum memperbaiki kode:

Kondisi Penyebab Solusi
Header hilang di Network Token null, headers tertimpa Log token, gabungkan headers dengan benar
HTTP 401 Token kedaluwarsa atau salah Login ulang, refresh token, logout bila perlu
HTTP 403 atau CORS error Server menolak origin atau header Perbaiki konfigurasi allowed headers server
JSON parse error Respons error berupa HTML Cek status dulu sebelum response.json

BACA JUGA:

Cara Memperbaiki Fetch Authorization Header di Frontend

Ikuti urutan ini di konteks browser JavaScript:

  1. Ambil token dan pastikan tidak null atau string kosong.
  2. Perbaiki format menjadi Bearer spasi token.
  3. Susun headers fetch tanpa menimpa Content-Type.
  4. Cek response.ok dan status sebelum parsing JSON.
// SALAH: token bisa null dan header tertimpa
fetch("/api/profil", {
  headers: { Authorization: localStorage.getItem("token") }
});

// BENAR
const token = localStorage.getItem("token");
if (!token) throw new Error("Token tidak ditemukan, silakan login ulang");

const res = await fetch("/api/profil", {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`
  }
});
if (!res.ok) throw new Error(`Gagal: ${res.status}`);
const data = await res.json();

Kode benar memastikan token ada, memakai skema Bearer, dan menolak respons gagal lebih awal. Jangan menaruh secret API permanen di frontend publik karena semua orang bisa membacanya dari bundle.

Cara Mencegah Header Auth Gagal Lagi

  • Simpan token dengan satu key konsisten dan bersihkan saat logout.
  • Tangani expiry dengan refresh token atau arahkan login ulang saat 401 berulang.
  • Samakan daftar allowed headers di server, termasuk Authorization dan Content-Type.
  • Hindari menonaktifkan keamanan browser atau memakai ekstensi bypass CORS untuk produksi.

FAQ

Kenapa header Authorization hilang padahal sudah ditulis di fetch?

Token bernilai null atau objek headers tertimpa oleh konfigurasi lain.

Kenapa fetch mengembalikan 401 walau token terlihat ada?

Token kedaluwarsa, salah format Bearer, atau ditolak oleh server.

Apakah aman menyimpan token auth di localStorage?

Tidak sepenuhnya aman dari XSS, jadi gunakan masa berlaku pendek dan validasi server.

Artikel Terkait