Skip to content

How to fix Axioserror: Network error?

  • by
  • 2 min read

React is one of the most popular web development frameworks around at the time. React owes a lot of its popularity to the availability of hundreds of different plugins and libraries that users can download and use to enhance their workflows.

Axios is one such library that can make sending requests back and forth to APIs and catching any errors rather easy. In this article, we’re talking about how to fix the “Axioserror: Network error” bug. 

Also read: Flutter vs React Native vs Ionic vs Xamarin


What causes this error?

This is a generic network error in Axios that can be triggered even when your API responds with a status code. There are a number of reasons why this might happen:

  • Incorrect requests.
  • Bug in Axios.
  • Status code bug in the API.

How to fix this error?

You can try out the following two fixes. 

Formulate proper API URLs

If you’re using APIs hosted internally on your network, it’s common practice to just refer to the server’s IP address followed by the API path to send requests and fetch any data. However, if you’re not adding HTTP:// to your requests, chances are Axios will give out a network error. 

Instead of writing your API URLs like this

123.45.67.890/API/Path

Write them like this

http://123.45.67.890/API/Path

Use Cross-Origin Resource Sharing (CORS)

If you’re creating your API using NodeJS, you need to use CORS to get your APIs working. Simply add the following snippet to your server file. 

// This should already be declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

Additionally, you might also have to include the following line before calling your controller in case CORS isn’t working properly. 

res.header( "Access-Control-Allow-Origin" );

Also read: React vs Next.js: 3 talking points

Yadullah Abidi

Yadullah Abidi

Yadullah is a Computer Science graduate who writes/edits/shoots/codes all things cybersecurity, gaming, and tech hardware. When he's not, he streams himself racing virtual cars. He's been writing and reporting on tech and cybersecurity with websites like Candid.Technology and MakeUseOf since 2018. You can contact him here: yadullahabidi@pm.me.

>