node.js - MEAN Stack App：从后端数据库查询中获取结果，但前端说它无法获得任何结果

Question

我有一个 MEAN 堆栈应用程序，最值得注意的是使用带有内置 Express.JS 后端的 Angular。我最近对我的本地 repo 进行了 FUBAR 处理，并从我的远程 repo 的克隆中重建了它，其中不包括我为破坏以前的 repo 所做的任何更改，并且目前在 Heroku 上进行了功能部署。但是，自从我克隆了存储库以来，我一直遇到一个问题，我可以使用“/api/monsters/” url 直接向我的后端进行查询并从我的数据库中获取结果，但是当前端尝试这样做会返回“无法获取 /api/monsters”。

这是我的 Server.js 文件。这是目前在 Heroku 中工作的版本，但为了让它在本地工作，我必须将第 12 行的 distDir 更新为“var distDir = __dirname + "/dist/monster-playbook";"。我还必须用我的数据库的 url 替换“process.env.MONGODB_URI”，我不能在此处或我的 github 存储库中发布它，因为该 url 包含我的登录凭据。

var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var ObjectID = mongodb.ObjectID;

var MONSTER_COLLECTION = "monsters";

var app = express();
app.use(bodyParser.json());

// Create link to Angular build directory
var distDir = __dirname + "/dist";
app.use(express.static(distDir));

// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;

// Connect to the database before starting the application server.
mongodb.MongoClient.connect(process.env.MONGODB_URI , function (err, client) {
    if (err) {
        console.log(err);
        process.exit(1);
    }

    // Save database object from the callback for reuse.
    db = client.db();
    console.log("Database connection ready");

    // Initialize the app.
    var server = app.listen(process.env.PORT || 8080
        , function () {
        var port = server.address().port;
        console.log("App now running on port", port);
    });
});

// Generic error handler used by all endpoints.
function handleError(res, reason, message, code) {
    console.log("ERROR: " + reason);
    res.status(code || 500).json({"error": message});
}

app.get("/api/monsters", function(req, res) {
    console.log('attempted');
    db.collection(MONSTER_COLLECTION).find({}).toArray(function(err, docs) {
        if (err) {
            handleError(res, err.message, "Failed to get monsters.");
        } else {
            res.status(200).json(docs);
        }
    });
});

app.post("/api/monsters", function(req, res) {
    var newMonster = req.body;
    newMonster.createDate = new Date();

    if (!req.body.name) {
        handleError(res, "Invalid user input", "Must provide a name.", 400);
    } else {
        db.collection(MONSTER_COLLECTION).insertOne(newMonster, function(err, doc) {
            if (err) {
                handleError(res, err.message, "Failed to create new monster.");
            } else {
                res.status(201).json(doc.ops[0]);
            }
        });
    }
});

app.get("/api/monsters/:id", function(req, res) {
    db.collection(MONSTER_COLLECTION).findOne({ _id: new ObjectID(req.params.id) }, function(err, doc) {
        if (err) {
                handleError(res, err.message, "Failed to get monster");
        } else {
            res.status(200).json(doc);
        }
    });
});

app.put("/api/monsters/:id", function(req, res) {
    var updateDoc = req.body;
    delete updateDoc._id;

    db.collection(MONSTER_COLLECTION).updateOne({_id: new ObjectID(req.params.id)}, updateDoc, function(err, doc) {
        if (err) {
            handleError(res, err.message, "Failed to update monster");
        } else {
            updateDoc._id = req.params.id;
            res.status(200).json(updateDoc);
        }
    });
});

app.delete("/api/monsters/:id", function(req, res) {
    db.collection(MONSTER_COLLECTION).deleteOne({_id: new ObjectID(req.params.id)}, function(err, result) {
        if (err) {
            handleError(res, err.message, "Failed to delete contact");
        } else {
            res.status(200).json(req.params.id);
        }
    });
});

编辑：这是该站点的代码仓库：https ://github.com/allredbm/Monster-Playbook 。

标签： node.jsangularmean-stack