ERR_CONNECTION_REFUSED 对于 React 和 axios

Question

我正在尝试使用 puppeteer 构建一个 instagram scraper 并做出反应，将用户名放在输入上，然后我想显示 scraped 控制台上的数据，我已经构建了 puppeteer 脚本并且它可以正常工作，它 returns 数据正确，但是我在尝试使用 axios 从 post 获取数据时遇到了一些问题，我正在为我的服务器使用节点 js 和 express，当我尝试使用 axios 执行 post 时，我不断收到错误消息。

我想在输入上写用户名，然后我想要 puppeteer 脚本运行，然后我想控制台记录 puppeteer 脚本 returns

的数据]

控制台出错

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

这是我的代码

服务器 > 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;

Answer 1

这里的问题是你用 get 定义了你的路由，比如 app.get("/api/getData/:username") 但你发送了一个 post 请求。将路由器更改为 app.post 或将 axios 方法更改为 axios.get.

更新除了上述更改之外，在您与我共享存储库后，我检查发现您还有另一个问题，即您不是运行您的服务器，因此显示 ERR_CONNECTION_REFUSED 消息。

我分叉了你的存储库并制作了 following changes 并为其创建了一个 PR。请查看它，如果你想将它合并到你的 master 分支。

P.S 下次请创建一个 .gitignore 文件并在其中添加 node_modules 这样你就不会推拉你的 node_modules 这需要更多时间时间量。

ERR_CONNECTION_REFUSED 对于 React 和 axios

ERR_CONNECTION_REFUSED for React and axios

node.js

express

reactjs

axios

puppeteer