堆棧內存溢出
  簡體   English   中英

FetchError：請求http：// localhost：3000 / api / projects失敗，原因：connect ECONNREFUSED 127.0.0.1:3000（Express / Next.Js）

[英]FetchError: request to http://localhost:3000/api/projects failed, reason: connect ECONNREFUSED 127.0.0.1:3000 (Express/Next.Js)

 原文  2019-03-19 04:07:54  5   1    javascript/ node.js/ express/ mongoose/ next.js

問題描述

我有一個API路由，根據請求獲取我在加載項目頁面（組件）時所需的數據，如下所示。

HTTP：//本地主機：3000 / API /項目

當我在pages/projects.js getInitialProps()加載我請求該數據的pages/projects.js它顯示了我想要的數據，如下所示，到目前為止一切都很好。

控制台記錄來自我進行的自定義Express API路由的數據

代碼在這里：

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

服務器/控制器/ 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 個解決方案

解決方案1
 0  2019-03-19 06:34:19

發生這種情況是因為您要在已使用的端口上運行應用程序。

您可以使用以下命令檢查在端口上運行的應用程序： 


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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 FetchError：請求 http://localhost:1337/api/products 失敗，原因：連接 ECONNREFUSED 127.0.0.1:1337 npm ERR: FetchError: request to http.//registry.npmjs,org/webpack-dev-server failed: 原因。 連接 ECONNREFUSED 127.0.0:1:8000 部署 NODE.JS + MONGODB（CRUD APP）時在 HEROKU 上連接 ECONNREFUSED 127.0.0.1:3000 POST http://localhost:3000/api/signup 400（錯誤請求） (7) 連接localhost 3000端口失敗：連接被拒絕 表示不監聽localhost：3000 Node.js localhost:3000 拒絕連接 連接到http：// localhost：3000 / api / contact時出錯 向“http://localhost:3000/”發出 GET 請求時出錯“加載資源失敗：net::ERR_CONNECTION_REFUSED ... delete.js” GET http：// localhost：3000 / projects / assets / jquery.masonry.js 404（未找到）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM