个人中心
gpt4 book ai didi

javascript - FetchError : request to http://localhost:3000/api/projects failed, 原因 : connect ECONNREFUSED 127. 0.0.1 :3000 (Express/Next. Js)

转载 作者：行者123 更新时间：2023-12-01 17:23:20 24 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





Fetch error when building Next.js static website in production

(1 个回答)


3个月前关闭。




我有一个 API 路由，在加载项目页面(组件)时，它可以根据请求获取我想要的数据，如下所示。

http://localhost:3000/api/projects

当我加载我在 getInitialProps() 中请求该数据的页面时在 pages/projects.js 内它显示了我想要的数据，如下所示，到目前为止一切都很好。

console logs data coming through from custom express API route I have made

代码在这里:

页面/projects.js 

import React, { Component } from "react";
import Layout from "../components/Layout";
import Siema from "siema";
import Head from "next/head";
import fetch from "isomorphic-unfetch";

export default class extends React.Component {
  componentDidMount() {
    this.siema = new Siema({
      loop: false
    });
  }

  prev = () => {
    this.siema.prev();
  };

  next = () => {
    this.siema.next();
  };

  render() {
    return (
      <Layout>
        <Head>
          <title>Jesal Patel ｜ Projects</title>
        </Head>
        <div className="container">
          <section>
            <div className="projects">
              <div className="siema">
                <div>
                  <img src="(ignore this the img is showing on stackoverflow post.)" />
                  <div className="overlay">
                    <div id="overlay_title">Dextero</div>
                    <div id="overlay_description">
                      I developed a multi-touch mobile game for stroke patients
                      to rehabilitate their finger coordination and dexterity.
                    </div>
                    <div id="overlay_tech">Java, Android, LibGDX, SQLite</div>
                  </div>
                </div>
              </div>
              <div />

              <button onClick={this.prev}>Prev</button>
              <button onClick={this.next}>Next</button>
            </div>
          </section>
        </div>
      </Layout>
    );
  }

  static async getInitialProps({ req }) {
    //This fetch is the reason why my project won't build
    const result = await fetch("http://localhost:3000/api/projects");
    const projects = await result.json();

    console.log(projects);

    return { projects };
  }
}

问题:

现在问题开始于我运行 next-build并在此期间引发以下错误: 编辑:我没有正确粘贴错误。注意:我运行 now-build导出项目的脚本，这是我的问题，这是导致我出现问题的原因 
   I:\Next.js\website>npm run now-build

> website@1.0.0 now-build I:\Next.js\website
> next build && next export -o dist

Creating an optimized production build ...

Compiled successfully.

 ┌ /
 ├ /_app
 ├ /_document
 ├ /_error
 ├ /contact
 └ /projects

> using build directory: I:\Next.js\website\.next
  copying "static" directory
  copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
  launching 11 threads with concurrency of 10 per thread
[====-] 4/5 80% 160/s 0.0s { FetchError: request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000
    at ClientRequest.<anonymous> (I:\Next.js\website\node_modules\node-fetch\lib\index.js:1444:11)
    at ClientRequest.emit (events.js:189:13)
    at Socket.socketErrorListener (_http_client.js:392:9)
    at Socket.emit (events.js:189:13)
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)
  message:
   'request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000',
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED' }
{ message:
   'request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000',
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! website@1.0.0 now-build: `next build && next export -o dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the website@1.0.0 now-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jesal\AppData\Roaming\npm-cache\_logs\2019-03-19T04_10_45_930Z-debug.log

我知道这是由于这条线 const result = await fetch("http://localhost:3000/api/projects"); ，但我不知道该怎么做才能使其构建。我是 MEAN 堆栈的新手。我不确定我是否必须在全局某处外部创建该路由才能正常工作？我不知道这是否会解决它或者它是否是别的东西。

我在这个应用程序中使用了 Express 和 Mongoose，这些代码可以在下面找到，以及 package.json。和 next.config.js文件。

服务器/index.js 
const express = require("express");
const next = require("next");
const bodyParser = require("body-parser");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const routes = require("./routes/index.js");
var mongoose = require("mongoose");
const PORT = process.env.PORT || 3000;

const dbName = "MySite";
const MONGO_URL =
  "mongodb+srv://admin:<hidden for privacy>@cluster0-5cjs1.mongodb.net/MySite?retryWrites=true";

app
  .prepare()
  .then(() => {
    mongoose.connect(MONGO_URL, { useNewUrlParser: true });

    mongoose.Promise = global.Promise;

    mongoose.connection.on("open", function() {
      console.log("mongodb is connected!!");
    });

    const db = mongoose.connection;

    model = db.modelNames();

    db.on("error", console.error.bind(console, "MongoDB connection error:"));

    const server = express();
    server.use(bodyParser.json());
    server.use(bodyParser.urlencoded({ extended: true }));
    server.use("/api", routes);

    server.use((req, res, next) => {
      // Also expose the MongoDB database handle so Next.js can access it.
      req.db = db;
      next();
    });

    server.get("*", (req, res) => {
      return handle(req, res);
    });

    server.listen(PORT, () => {
      console.log("Server is up and running on port number " + PORT);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

服务器/路由/index.js 
const express = require("express");
const router = express.Router();

const project_controller = require("../controllers/project_controller");

router.get("/projects", project_controller.projects_list);

module.exports = router;

服务器/模型/project_schema.js 
var mongoose = require("mongoose");

var Schema = mongoose.Schema;

var ProjectSchema = new Schema(
  {
    name: String,
    description: String,
    tech: String
  },
  { collection: "project" }
);

module.exports = mongoose.model("Project", ProjectSchema);

服务器/ Controller /project_controller.js 
const Project = require("../models/project_schema");

exports.test = function(req, res) {
  res.send("Greetings from the Test controller!");
};

exports.projects_list = function(req, res) {
  var documents = Project.find({}, function(err, docs) {
    if (err) throw err;
    res.send(docs);
    return docs;
  });
};

exports.project_create = function(req, res) {
  let project = new Project({
    name: req.body.name,
    description: req.body.description,
    tech: req.body.tech
  });

  project.save(function(err, project) {
    if (err) {
      console.log("Unsuccessful");
    }
    console.log("Saved!");
  });
};

包.json 
{
  "name": "website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon server/index.js",
    "now-build": "next build && next export -o dist",
    "build": "next build",
    "start": "next start -p 8000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@engineerapart/nextscript": "^1.0.2",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.3.1",
    "co": "^4.6.0",
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "file-loader": "^3.0.1",
    "isomorphic-unfetch": "^3.0.0",
    "jquery": "^3.3.1",
    "mongodb": "^3.1.13",
    "mongoose": "^5.4.19",
    "next": "^8.0.4-canary.10",
    "next-compose-plugins": "^2.1.1",
    "next-images": "^1.0.4",
    "nodemon": "^1.18.10",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-slick": "^0.23.2",
    "siema": "^1.5.1",
    "superagent": "^4.1.0",
    "url-loader": "^1.1.2"
  }
}

next.config.js 
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");

module.exports = {
  crossOrigin: "anonymous"
};

module.exports = withPlugins([withImages, withCSS]);

module.exports = withImages();

// module.exports = withCSS();

module.exports = {
  target: "serverless"
};

module.exports = withCSS({
  webpack: function(config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
          name: "[name].[ext]"
        }
      }
    });
    return config;
  }
});

更新:这是对 Prabhakar Pandey 响应的更新，让你们知道，我在运行 now-build 时总是关闭服务器。命令，另外，要非常清楚，正如我之前在第一次编辑这篇文章时提到的，这是该命令的第二部分失败并出现错误，即 next export -o dist不是 next build ，效果很好!另外，我使用的是 Windows 操作系统而不是 Mac 操作系统。

最佳答案

发生这种情况是因为您想在已被使用的端口上运行应用程序。

您可以使用以下命令检查端口上运行的应用程序:


For macOS El Capitan and newer (or if your netstat doesn't support -p), use lsof

sudo lsof -i tcp:3000 

For Centos 7 use

netstat -vanp --tcp | grep 3000

Also if wnat to kill any process you can use

kill -9 `PID`

when port is empty you try your application by rebuilding it should work

关于javascript - FetchError : request to http://localhost:3000/api/projects failed, 原因 : connect ECONNREFUSED 127. 0.0.1 :3000 (Express/Next. Js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55233508/

24 4 0
文章推荐： ios - 在 Interface Builder 上，将 UILabel 连接到自定义 UIView IBOutlet
文章推荐： java - 如何使用 ReactiveMongoTemplate 将 Flux 结果映射到另一种对象类型
文章推荐： java - hql 不删除查询确定
文章推荐： ios - NSTimeInterval有多准确
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com