AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

I'm working on a project that has the frontend built in react and backend in spring and I can't seem to connect the two of them by using axios.

Keep in mind that the backend is working properly (also that I'm not very good at react).

this is the error I'm getting at the console:

1. AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

   1. code: "ERR_NETWORK"

   2. config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}

   3. message: "Network Error"

   4. name: "AxiosError"

   5. request: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}

   6. response: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}

   7. [[Prototype]]: Error

this is my api.js:

import axios from 'axios';

const api = axios.create({
  baseURL: "https://localhost:8080"
});

export default api;

this is my App.js:

import './App.css';
import axios from "axios";
import {useEffect, useState} from 'react'
import api from './api.js';

function App() {
  const songs = async () => {
    try{
      const response = await api.get("/songs");
    }
    catch(err) {
      console.error(err);
    }
  };
  return (
     <div className="all-page">
             <main className="central-div">
                <h2>Taylor's Songs</h2>
                <button type="submit" className="quote-bttn" onClick={songs}>
                    FIND ME A QUOTE
                </button>
                <button type="submit" className="recommend-bttn">
                    GET ME A RECOMMENDATION
                </button>
             </main>
        </div>
  );
 
}

export default App;

the problem comes whenever I try to click the button "quote-bttn".

If anyone has any idea of how to fix this problem I'd really appreciate it!

(also, if there's anything I've left out, this is the full code: https://github.com/vitoriaacarvalho/my-taylor-swift-api/commit/0276222d35aa9a3fda8033f594d9727feded854b")

You seem to be using an https request and not an http. Your base URL translates that your server is in your local machine. Local servers can be accessed using both http and https but if you are sure that you have configured your SSL certificate to access https requests then try checking your CORS policy/ restrictions on the backend. Ideally one will select CORS: "AllowAll" but you can also configure it so the request is only accepted from a designated client port.