React 和 axios 的 ERR_CONNECTION_REFUSED

Question

我正在尝试使用 puppeteer 构建一个 instagram scraper 并做出反应，将用户名放在输入端，然后我想在控制台，我已经构建了 puppeteer 脚本并且它工作正常，它正确返回数据，但是我在尝试使用 axios 从帖子中获取数据时遇到了一些问题，当我尝试使用节点 js 并为我的服务器表达时用 axios 发帖，一直报错。

我想在输入上写用户名，然后我想运行 puppeteer 脚本，然后我想控制台记录 puppeteer 脚本返回的数据

控制台出错

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")，但您正在发送一个发布请求。将路由器更改为app.post 或将您的axios 方法更改为axios.get。

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

我分叉了您的存储库并创建了following changes 并为它创建了一个 PR。请看一下，如果你想把它合并到你的主分支。

P.S 请下次创建一个.gitignore 文件并将node_modules 添加到那里，这样你就不会推拉你的node_modules，这会花费更多时间。