ERR_CONNECTION_REFUSED for React and axios

Viewed 4238

I'm trying to build a instagram scraper with puppeteer and react that works with putting the username on an input and then I want to show the scraped data on the console, I already built the puppeteer script and It works, it returns the data correctly, But I have some issues trying to get the data from a post with axios, I'm using node js and express for my server, when I try to do the post with axios I keep getting an error.

I want to write the username on the input, then I want the puppeteer script to run, and then I want to console log the data that the puppeteer script returns

Error on console

POST http://localhost:4000/api/getData/username_im_scraping net::ERR_CONNECTION_REFUSED

This is my code

Server > index.js

const path = require("path");
const express = require("express");
const webpack = require("webpack");
const cors= require('cors');
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const config = require(path.join(__dirname, "../webpack.config.js"));
const compiler = webpack(config);
const app = express();

const { script } = require("./script");

app.use(webpackDevMiddleware(compiler, config.devServer));
app.use(webpackHotMiddleware(compiler));
app.use(express.static(path.join(__dirname, '../build')));
app.use(cors());

app.get("/api/getData/:username", async (req, res) => {
    console.log(`starting script for user ${req.params.username}`);
    const data = await script(req.params.username);
    console.log(`stopping script for user ${req.params.username}`);
    res.send(data);
});

app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build', 'index.html'));
});

app.listen(process.env.PORT || 4000, () => {
    console.log('Server is listening on port 4000');
});

Homepage.js

import React, { useState } from "react";
import axios from "axios";

const Homepage = props => {
    const [username, setUsername] = useState("");

    const onChange = ({ target: { value } }) => setUsername(value);

    const onClick = () => {
        axios.post('http://localhost:4000/api/getData/' + username, {
            header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;application/json' },
        mode: "cors"
    })
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            if (error.response) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                console.log(error.request);
            } else {
                console.log('Error', error.message);
            }
        })
};

return (
    <div>
        Time to start coding!
        <input value={username} onChange={onChange} />
        <button onClick={onClick}>Get instagram followers!</button>
    </div>
);
};

export default Homepage;
1 Answers

The problem here is you defined your route with get like app.get("/api/getData/:username") but you are sending a post request. Either change the router to app.post or your axios method to axios.get.

UPDATE Besides the changes above, after you shared the repository with me i checked and saw you have another problem, which was that you were not running your server so the ERR_CONNECTION_REFUSED message shown.

I forked your repository and made the following changes and created a PR for it. Please take a look at it, and if you want just merge it to your master branch.

P.S please for the next time create a .gitignore file and add node_modules to there so you don't push and pull your node_modules which takes some more amount of time.

Related