Source:  Twitter logo

When trying to post a http request using axios, I am getting following error:

Network Error
- node_modules/axios/lib/core/createError.js:16:24 in createError
- node_modules/axios/lib/adapters/xhr.js:81:25 in handleError
- ... 9 more stack frames from framework internals

I tried replacing "proxy"="http://localhost:8080" with "http://myip:8080", in package.json but the error persists. I also tried using the fetch command f react native but it also gave the same error

package.json is:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "expo": "^35.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.7.9",
    "morgan": "^1.9.1",
    "nodemon": "^1.19.4",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-router-flux": "^4.0.6",
    "react-native-web": "^0.11.7",
    "react-router-dom": "^5.1.2",
    "spectre.css": "^0.5.8"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0",
    "concurrently": "^5.0.0"
  },
  "private": true,
  "proxy": "http://localhost:8080"
}

server.js is:


const express = require('express')
const bodyParser = require('body-parser')
const morgan = require('morgan')
const app = express()
const PORT = 8080

// MIDDLEWARE
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
//routing
app.post('/', (req, res, next)=> {
    console.log('server post username: ');
    console.log(req.body.username)
    res.end()
})

// Starting Server 
app.listen(PORT, () => {
    console.log(`App listening on PORT: ${PORT}`)
})

snippet for axios post is:

axios.post('/', {
            username: this.state.username,
            password: this.state.password
        })
            .then(response => {
                console.log(response)
                if (response.data) {
                    console.log('successful signup')
                    this.setState({
                        redirectTo: '/login'
                    })
                } else {
                        console.log('Sign-up error');

                    }
            }).catch(error => {
                console.log('Sign up server error: ')
                console.log(error);
            })

The output on executing the above code is:

Sign up server error: 

Network Error
- node_modules/axios/lib/core/createError.js:16:24 in createError
- node_modules/axios/lib/adapters/xhr.js:81:25 in handleError
- ... 9 more stack frames from framework internals

first I suggest you too use different route namespaces instead of using app.post('/') try app.post(/api`), secondly you are not sending any data to client or any status code. try following:

app.post('/api/post', (req, res, next)=> {
    console.log('server post username: ');
    console.log(req.body.username)
    return res.status(200).send({redirectTo: '/login'});
 })

and axios

 axios.post('/api/post', {
     username: this.state.username,
     password: this.state.password
 })
 .then(response => {
       console.log('successful signup')
       this.setState({
            redirectTo: '/login'
       })

 }).catch(error => {
       console.log('Sign up server error: ')
       console.log(error);
 })

Also i would suggest you to use cors library for Cross Origin requests. download it from npm (or yarn or whatever)

and instead of

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, 
  DELETE');
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content- 
Type, Accept");
   next();
});

use this

const cors = require('cors');
app.use(cors())
0 users liked answer #0dislike answer #00
iLiA profile pic
iLiA

The problem is resolved,I was using wrong IP(172.0.0.1) given by hostname --ip-address. Using the inet ip given by ip addr show works.

0 users liked answer #1dislike answer #10
Aniket profile pic
Aniket

this works for me:

sudo ufw allow *your server api port here*
0 users liked answer #2dislike answer #20
Antoniel Carlos Amaral profile pic
Antoniel Carlos Amaral

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).