React: Axios Error "Error: Network Error", My react app cannot receive axios.post response

Question

I hava Nodejs Express Backend, React Frontend. I checked if frontend sends a request to the backend and that request is sent to backend. And the backend sends a response to the frontend but cannot receive.

Frontend -- request --> Backend checked. and the request reaches the backend.
Frontend <-- response -- Backend

During the second process, if I receive using postman, it works well. But if I receive using frontend, it is not working and just throw the error "Error: Network error", anymore information isn't provided.

Also I tried React: Axios Network Error and Post request Axios : Network error.

Node js Backend:

export const Login = async (req: Request, res: Response, next:NextFunction) => {
        console.log("LOGIN SUCCESS");
        res.json({ code: 200, token: "token" });
}

React Frontend:

const Login = async () => {
    try {
        const res = await axios.post('http://localhost:6382/auth/login', { id: "id", password: "password" }); // ERROR!
    } catch (err) {
        console.log(err); // Displays "Error: Network error"
    }

Additionally, My backend app.js

import * as express from 'express';
import * as cors from 'cors'
import * as helmet from 'helmet';

class App {
    public app: express.Express;

    constructor() {
        this.app = express();
        this.initializeMiddlewares();
    }
    
    private initializeMiddlewares() {
        this.app.use(helmet());
        this.app.use(cors());
        this.app.use(express.json({limit:"100mb"}));
        this.app.use(express.urlencoded({limit:"100mb", extended:true}));
    }
}

export default App;

server.ts

import App from './app';

const { app } = new App;

app.listen(6382 ,() => {
  console.log(
    `Server listening on : 6382`);
});

What should I do?

/auth/login May be this is not the full url. host name is missing. — Bimal Pariyar, Dec 19 '21 at 07:19
sorry. same result. and I checked my request reaches backend before. — wookboy00, Dec 19 '21 at 07:24
Change `const { app } = new App;` to `const app = new App;`. You didn't provide a named, export, so app is the default one. — code, Dec 27 '21 at 04:31

score 0 · Answer 1 · answered Dec 19 '21 at 08:10

0

Previously had the same issue, I forgot to add proxy to package.json. You have to add it to package.json at front-end files and it should do the trick.

"proxy": your backend url..

answered Dec 19 '21 at 08:10

henrbu

137
10

I add `"proxy": "http://localhost:6382/"` but new error thrown "WebSocket connection to 'ws://localhost:3000/ws' failed: WebSocket is closed due to suspension." – wookboy00 Dec 19 '21 at 08:16
And "Error: Network error" still continues to occur. – wookboy00 Dec 19 '21 at 08:26
Have you tried to add these 2 properties to cors? cors({origin: true, credentials: true}) – henrbu Dec 19 '21 at 08:49
The error has disappeared, but Network error still occurs. – wookboy00 Dec 19 '21 at 10:12

React: Axios Error "Error: Network Error", My react app cannot receive axios.post response

1 Answers1