AxiosError{message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {}, reque

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:

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

  • code: "ERR_NETWORK"

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

  • message: "Network Error"

  • name: "AxiosError"

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

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

  • [[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")

    2

    6 Answers

    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.

    1

    If you are trying on local, cors does not have importance. You need to make sure that you are pointing to the correct endpoint url on the backend.

    For example if your endpoint url is http://localhost:5000/api in the backend and from the front you are pointing to http://localhost:5000/api2 this misspelling will couse 'Networ Error' from axios.

    4

    I don't know why exactly but problem in my case was I didn't render component inside test block but in describe.

    ---- wrong-----

    describe("", ()=> { render(<Component />); test("", () => { }) }) 

    ---- correct -----

    describe("", ()=> { test("", () => { render(<Component />); }) }) 

    Try to enable CORS in your API.

    // Enable cors at the server side. const cors = require('cors') const corsOption = { origin: ['http://localhost:3000'], credentials: true, methods: ["GET", "POST", "PUT", "DELETE"], } app.use(cors(corsOption)); 

    When you are requesting localhost through Axios, add your network IP address instead of localhost, like this

    https://192.168.0.122:8080 

    ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobm1tYGeBeX6Omq%2Bip6Oav7O70WaknqujlrSmec2eq7CnoqB6pr7RqKlmppGism6t16KmrJ2ip7yzecKom55llae%2FbrrEra6oqptisA%3D%3D