Submit POST/GET data to API using Axios or Fetch in React.js app

For the GitHub repository, see here.

In this app, you can contact the API that listens on a given port for a log-in and then an access to a resource that is password protected. You access the app either through axios or fetch. Credentials are needed to be sent since you tell the API what session id is in the header cookie that identifies this session.

In Axios you use “withCredentials: true” as you submit the POST or GET request:

POST (put in a try/catch block, like the full example):

  
      const res = await axios
        .post("http://localhost:28416/api/login",
        {email: userEmail, password: userPassword, clusterId: 1},
        { 
          withCredentials: true,
          'Access-Control-Allow-Origin': 'http://localhost:28416',
        }
        );

Full example:

 const loginExample = async(userEmail,userPassword) => {
    console.log("got: " + userEmail + ", " + userPassword)
    //axios.defaults.withCredentials = true; //an alternative
    //axios.defaults.baseURL="http://localhost:28416" //another feature in axios
    try {
      const res = await axios
        .post("http://localhost:28416/api/login",
        {email: userEmail, password: userPassword, clusterId: 1},
        { 
          withCredentials: true,
          'Access-Control-Allow-Origin': 'http://localhost:28416',
          /*
          can try these also:
          {headers: {
          withCredentials: true,
          credentials: 'include',
          'Access-Control-Allow-Origin': 'http://localhost:28416',
          //or this: 'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
          }
          */
        }
        );
      console.log("got from server: " + JSON.stringify(res.data))
      if (res.data.message == "User OK") {
        //welcome the user
      }
    } catch (e) {
      console.log(e)
    }
  }

GET:

    axios
    .get("http://localhost:28416/api/record/172", {
        withCredentials: true,
      })
    .then((response) => {
      console.log("return for access to http://localhost:28416/api/record/172:\n "
       + JSON.stringify(response.data))      
    }).catch(err=>{console.log("err: " + err)})

       

This is how axios/fetch request can be put against the API. We can either use “await” with a request and put it in a try/catch block or request a resource and use .then and .catch with the request.

A Fetch example is as below. We include the ‘credentials: “include” ‘ parameter to send session id stored in the header cookie along side every request:

POST:

const loginExample1 = async(userEmail,userPassword) => {
    console.log("got: " + userEmail + ", " + userPassword)
    const body = {email: userEmail, password: userPassword, clusterId: 1};
    console.log("send body: " + JSON.stringify(body))
    fetch('http://localhost:28416/api/login', {
    //mode: 'no-cors',
    credentials: "include",
    method: 'POST',
    body: JSON.stringify(body),
    headers: {'Content-Type': 'application/json'},
    }).then (response => response.json()).then(data=>console.log(data));
    //const content = await rawResponse.json();
    //console.log(JSON.stringify(content));
    //console.log("content");
  }

GET:

  function getResource1() {
    fetch("http://localhost:28416/api/record/172", {
      credentials: "include"
    })
      .then(response => response.json())
      .then(data => console.log(data))
  }

There were two examples using Axios or Fetch in React.js. Axios needs to be imported but Fetch is already given by JavaScript. For Axios import do:

import axios from 'axios';

For the GitHub repository, see here.