FetchError：对http：// localhost：3000 / api / projects的请求失败，原因：连接ECONNREFUSED 127.0.0.1:3000（Express / Next.Js）

时间：2019-03-19 04:07:54

标签： javascript node.js express mongoose next.js

我有一个API路由，如下图所示，当加载“项目”页面（组件）时，可根据要求获取我想要的数据。

http://localhost:3000/api/projects

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

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

该代码在这里：

pages / 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 Stack新手。我不确定是否必须在全局某处外部创建该路由才能正常工作？我不知道这是否可以解决它，还是其他原因。

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

server / 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);

服务器/控制器/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!");
  });
};

package.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 OS。

1 个答案:

答案 0 :(得分：0)

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

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


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
相关问题
最新问题