API POST 错误：MongoDB 和 Ionic 应用程序答案

【问题标题】：API POST error: MongoDB & Ionic AppAPI POST 错误：MongoDB 和 Ionic 应用程序
【发布时间】：2015-09-15 07:06:15
【问题描述】：

我正在尝试做的事情：将我的 mongolab 数据库连接到我的 ionic 应用程序。（我会使用 Firebase，但 Firebase 没有我需要的文本搜索）。

我按照 (https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular) 中的示例进行了一些指导。

但是，我收到了错误：

加载资源失败：服务器响应状态为 404 （未找到）http://localhost:8100/api/todos

我的文件结构： -项目

+-www
+---js
------app.js
------server.js
------cordova.js
+-----controllers
+---css
+---img
+---lib
+---templates

我知道我可能遗漏了一些基本的东西。我不明白我的 server.js 是如何被 ionic 加载的？

这是我的 server.js 的一个 sn-p（只是相关部分）

// set up ========================
var express  = require('express');
var app      = express();                               // create our app w/ express
var mongoose = require('mongoose');                     // mongoose for mongodb
var morgan = require('morgan');             // log requests to the console (express4)
var bodyParser = require('body-parser');    // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var uriUtil = require('mongodb-uri');

// configuration =================

var mongodbUri = 'mongodb://<myusername>:<mypass>@ds036648.mongolab.com:36648/<mydb>';
var mongooseUri = uriUtil.formatMongoose(mongodbUri);
mongoose.connect(mongooseUri);     // connect to mongoDB database on modulus.io

// listen (start app with node server.js) ======================================
app.listen(8100);
console.log("App listening on port 8100");

// define model =================
var Todo = mongoose.model('Todo', {
    text : String
});

// create todo and send back all todos after creation
app.post('/api/todos', function(req, res) {

    // create a todo, information comes from AJAX request from Angular
    Todo.create({
        text : req.body.text,
        done : false
    }, function(err, todo) {
        if (err)
            res.send(err);

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err)
                res.send(err)
            res.json(todos);
        });
    });

});

我正在使用的html：

<!-- FORM TO CREATE TODOS -->
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>

                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
                </form>
            </div>
        </div>

我的控制器：

angular.module('starter')
.controller('todosController', function($scope,$http) {

    $scope.formData = {};
    // when submitting the add form, send the text to the node API
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form so our user is ready to enter another
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

【问题讨论】：

你的 ionic 服务器和你的 API 服务器应该是 2 个不同的服务器，这行 $http.post('/api/todos', $scope.formData) 看起来很奇怪，因为你应该请求另一个服务器跨度>
你也在节点上运行 server.js 或类似的东西吗？

标签： angularjs mongodb mongoose ionic-framework

【解决方案1】：

您的问题似乎在这里：

$http.post('/api/todos', $scope.formData)

它应该指向一个服务器：所以它需要是这样的：

$http.post('https://localhost:8100/api/todos', $scope.formData)

【讨论】：

感谢伟大的 anwser，但是当我将我的应用程序部署到服务器时，我必须在每个文件中将路径从 localhost:8100 更改为 mywebsitename？
它应该指向你的 api 路径。所以如果你在本地运行你的服务器进行测试，它就像上面一样。如果不是，那么它应该指向您的服务器。所以是的，你必须改变它。

【解决方案2】：

首先，您需要在 8100 以外的端口上运行节点服务器，因为 ionic 使用 8100 端口。写

app.listen(3000);

而不是

app.listen(8100);

现在对于 api 请求使用这个

$http.post('http://localhost:3000/api/todos', $scope.formData)

但是这次你会报错

请求的资源上没有“access-control-allow-origin”标头。

这是因为浏览器阻止了它，因为出于安全原因，它通常允许同源请求。所以解决方案是通过在运行窗口中使用以下命令禁用安全性来打开 chrome >

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

【讨论】：