External API GET: 401 status "No authorization token was found"

Question

I am a super beginner and I am developing full-stack app with node.js and react. I got this 3rd API to scrap social media and insert it inside my backend router.get code. I tested in Thunder Client and it works with bearer token since it is protected route with verification. The thing is it says my verification is working (console message) and Thunder Client gets the data successfully but when I tried to get it in the browser it gives me this error message:

ERROR GET /api/inspiration UnauthorizedError: No authorization token was found...

router.get("/inspiration", isAuthenticated, (req, res, next) => {
  const options = {
    method: 'GET',
    url: 'https://instagram130.p.rapidapi.com/account-feed',
    params: {username: 'lululemon'},
    headers: {
      'X-RapidAPI-Key': '2b90b0f361msh8b43d50ec02dbcep1952bdjsn487cd58b3f12',
      'X-RapidAPI-Host': 'instagram130.p.rapidapi.com'
    }
  };

  axios
    .request(options)
    .then((response) => {
      console.log("Instagram response", response);
      res.status(201).json(response.data);
    })
    .catch((err) => {
      res.status(400).json({ message: "can't get instagram posts!" });
    });
});

This is React (front-end)

import axios from "axios";

const API_URL = "http://localhost:5005";

import React, { useEffect, useState } from "react";

const InspirationPage = () => {
  const [instagramPosts, setInstagramPosts] = useState([]);


  useEffect(() => {
    // Make the API request to get Instagram posts
    axios
      .get(`${API_URL}/api/inspiration`) 
      .then((response) => {
        setInstagramPosts(response.data);
        console.log("Instagram info:", response.data);
      })
      .catch((error) => {
        console.error("Error fetching Instagram posts:", error);
      });
  }, []);

  return (
    <div>
      <h1>Inspiration Page</h1>
      {instagramPosts ? (
        <div>
          {/* Render Instagram data here */}
          <p>Username: {instagramPosts.external_url_linkshimmed}</p>
          {/* Add more fields as needed */}
        </div>
      ) : (
        <p>Loading Inspiration ...</p>
      )}
    </div>
  );
};

export default InspirationPage;

I check all data and it was written correctly like secret key etc. The API is this one: https://rapidapi.com/neotank/api/instagram130/ (I used the 'GET by account-info').

Please help :*( it's so difficult to consume all of these and I've been trying for hours...but nothing works... so frustrated.

Answer 1

I think you haven't added a bearer token when making the API call with axios.

You can fix like this:

const bearerToken = 'YOUR_BEARER_TOKEN_HERE';

// Make the API request to get Instagram posts with the bearer token
axios
  .get(`${API_URL}/api/inspiration`, {
    headers: {
      Authorization: `Bearer ${bearerToken}`,
    },
  })
  .then((response) => {
    setInstagramPosts(response.data);
    console.log("Instagram info:", response.data);
  })
  .catch((error) => {
    console.error("Error fetching Instagram posts:", error);
  });