Configuring a Shared Axios Instance with Interceptors

Using plain axios.get() in components works but does not scale. As the MERN Blog grows, you end up with the base URL, auth header, and error handling logic repeated in every component. The solution is a configured Axios instance — a single object created once with the base URL, timeout, and interceptors already set up. Every API call in the application goes through this instance, guaranteeing consistent auth headers, consistent error handling, and a single place to update when the API configuration changes.

Creating the Axios Instance #

// src/services/api.js
import axios from 'axios';

// Create a configured instance — not the global axios object
const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || '/api',
  timeout: 15000, // 15 seconds — requests that take longer are cancelled
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

// client/.env (Vite environment variables — must start with VITE_)
VITE_API_URL=/api          ← development (Vite proxy handles /api → localhost:5000)

// client/.env.production
VITE_API_URL=https://api.mernblog.com    ← production (full URL)

// In Vite, import.meta.env.VITE_API_URL reads the value.
// Never prefix with REACT_APP_ — that is Create React App syntax.
// Variables not prefixed with VITE_ are not exposed to the browser.

Request Interceptor — Automatic Auth Header #

// src/services/api.js (continued)

// Request interceptor runs before every request sent by the api instance
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config; // must return config to continue with the request
  },
  (error) => {
    // Error creating the request (very rare)
    return Promise.reject(error);
  }
);

Response Interceptor — Global Error Handling #

// Response interceptor runs after every response received
api.interceptors.response.use(
  (response) => {
    // 2xx response — pass through unchanged
    return response;
  },
  (error) => {
    const status = error.response?.status;

    // 401 Unauthorized — token expired or invalid
    if (status === 401) {
      localStorage.removeItem('token');
      // Redirect to login — preserving the current path as state
      window.location.href = `/login?from=${encodeURIComponent(window.location.pathname)}`;
    }

    // 503 Service Unavailable — server is down
    if (status === 503) {
      console.error('API server is unavailable. Please try again later.');
    }

    // Re-reject so individual call sites can also handle the error
    return Promise.reject(error);
  }
);

The Complete api.js Module #

// src/services/api.js — complete module
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || '/api',
  timeout: 15000,
});

// ── Request interceptor: attach token ─────────────────────────────────────────
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// ── Response interceptor: handle global errors ────────────────────────────────
api.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

export default api;

The Service Layer — Wrapping API Endpoints #

// src/services/authService.js
import api from './api';

const authService = {
  register: (data)  => api.post('/auth/register', data),
  login:    (data)  => api.post('/auth/login',    data),
  getMe:    ()      => api.get('/auth/me'),
  logout:   ()      => api.post('/auth/logout'),
};

export default authService;

// src/services/postService.js
import api from './api';

const postService = {
  getAll:   (params)    => api.get('/posts',      { params }),
  getById:  (id)        => api.get(`/posts/${id}`),
  create:   (data)      => api.post('/posts',      data),
  update:   (id, data)  => api.patch(`/posts/${id}`, data),
  remove:   (id)        => api.delete(`/posts/${id}`),
  publish:  (id)        => api.patch(`/posts/${id}/publish`),
};

export default postService;

// src/services/userService.js
import api from './api';

const userService = {
  getProfile:    (id)   => api.get(`/users/${id}`),
  updateProfile: (id, data) => api.patch(`/users/${id}`, data),
  getUserPosts:  (id, params) => api.get(`/users/${id}/posts`, { params }),
};

export default userService;

Using Services in Components #

// Clean component — no Axios code, no token management
import postService from '@/services/postService';

function PostListPage() {
  const [posts,   setPosts]   = useState([]);
  const [loading, setLoading] = useState(true);
  const [error,   setError]   = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const fetchPosts = async () => {
      try {
        setLoading(true);
        const res = await postService.getAll({ page: 1, limit: 10, published: true });
        setPosts(res.data.data);
      } catch (err) {
        if (!axios.isCancel(err)) {
          setError(err.response?.data?.message || 'Failed to load posts');
        }
      } finally {
        setLoading(false);
      }
    };
    fetchPosts();
    return () => controller.abort();
  }, []);

  // ...
}

Common Mistakes #

Mistake 1 — Using the global axios instead of the configured instance #

❌ Wrong — bypasses interceptors, no auth header, no base URL:

import axios from 'axios';
const res = await axios.get('/api/posts'); // no token, no timeout, no error handling

✅ Correct — always use the configured instance:

import api from '@/services/api';
const res = await api.get('/posts'); // baseURL + token + interceptors ✓

Mistake 2 — Re-rejecting errors in the interceptor with a different shape #

❌ Wrong — wrapping the error breaks per-component error handling:

return Promise.reject(new Error('Something went wrong')); // loses err.response!

✅ Correct — always re-reject with the original error:

return Promise.reject(err); // ✓ err.response still accessible in catch blocks

Mistake 3 — Not awaiting service calls #

❌ Wrong — service returns a Promise, not the data directly:

const result = postService.getById(id); // Promise — not the data!
setPosts(result.data); // TypeError: Cannot read properties of a Promise

✅ Correct — await the service call:

const result = await postService.getById(id); // ✓ resolved response object
setPosts(result.data.data);

Quick Reference #