API Handling

Axios Default Header

import axios from "axios";

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
    axios.defaults.headers.common["Access-Control-Allow-Methods"] =
      "GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH";
  } else delete axios.defaults.headers.common["Authorization"];
};

export default setAuthToken;

AXIos Intercept

Intercept Request
Using a request intercept, you can write or execute before it is sent. Check out the below code snippet.

axios.interceptors.request.use(function (request) {
  request.headers['Content-Type'] = 'multipart/form-data';
  return request;
}, null, { synchronous: true });
view raw.jsx hosted with ❤ by GitHub
Here we have added the contentType header before the request is made. Request interceptors are asynchronous by default, which might cause some delay in Axios request execution. To avoid this, we have used synchronous: true.

Intercept Response
Using Request intercept you can write or execute before the response reaches then. Response interceptors can be used to log out the user on token expiry (401 status) or you can refresh the token and make the failed request again to make the user stay on the same page, for good UX.

axios.interceptors.response.use(function (response) {
    //Dispatch any action on success
    return response;
  }, function (error) {
      if(error.response.status === 401) {
       //Add Logic to 
             //1. Redirect to login page or 
             //2. Request refresh token
      }
    return Promise.reject(error);
  });

Example

import axios from "axios";

const setAuthToken = (token) => {
  axios.interceptors.request.use(
    function (config) {
      // Do something before request is sent
      config.headers = {
        ...config.headers,
        Authorization: `Bearer ${token}`,
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH",
      };
      return config;
    },
    function (error) {
      // Do something with request error
      return Promise.reject(error);
    }
  );

  axios.interceptors.response.use(
    function (response) {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      return response;
    },
    function (error) {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      return Promise.reject(error);
    }
  );
  // If you need to remove an interceptor later you can.

  // const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
  // axios.interceptors.request.reject(myInterceptor);
  // You can add interceptors to a custom instance of axios.

  // const instance = axios.create();
  // instance.interceptors.request.use(function () {/*...*/});
};

export default setAuthToken;