无法使用 Angular、js 和 Node、js 在 mongoDB 上存储数据答案

【问题标题】：Can not able to store data on mongoDB with Angular,js and Node,js无法使用 Angular、js 和 Node、js 在 mongoDB 上存储数据
【发布时间】：2017-10-07 10:35:52
【问题描述】：

我正在学习 MEAN 堆栈。当我尝试使用 Angular.js 和 node.js 执行存储 HTML 表单数据 mongoDB 的基本程序时。但是我遇到了错误，我无法解决它。

控制台输出：

点击提交

index.html:1 XMLHttpRequest 无法加载 http://localhost:8080/blah。对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此，不允许访问 Origin 'null'。

angular.min.js:123 可能未处理的拒绝： {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback" ,"url":"http://localhost:8080/blah","data":{},"headers":{"Accept":"application/json, 文本/纯文本， /","Content-Type":"application/json;charset=utf-8"}},"statusText":""}

我正在发布 html 文件、angular js 文件和 node.js 文件的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="Scripts/angular.min.js"></script>
  <script src="Scripts/app.js"></script>

</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <form>
      Author:
      <input type="text" ng-model="author">
      <br>
      <br> Title:
      <input type="text" ng-model="title">
      <br>
      <br> Body:
      <input type="author" ng-model="body">
      <br>
      <br>
      <input type="submit" value="Submit" ng-click="submit()">
    </form>
  </div>
</body>
</html>

app.js

var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope,$http) {
 $scope.data = {};
$scope.submit= function(){
    console.log('clicked submit');
    $http({
        url: 'http://localhost:8080/blah',
        method: 'POST',
        data: $scope.data
    }).then(function (httpResponse) {
        console.log('response:', httpResponse);
    })
   }
 });

server.js

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/loginapp');
var db = mongoose.connection;


//const url = 'mongodb://localhost:27017/conFusion';

var port = 8080;

var app = express();

app.use(bodyParser.json({limit: '50mb'}));
app.use(express.static('public'));

app.post('/blah', function(req, res, next){
  var cope = req.body.params;
  db.collection('book').insert(cope, (err, result) => {
    if (err) 
    { 
      res.send({ 'error': 'An error has occurred' }); 
    } 
    else 
    {
      res.send(result.ops[0]);
    }

  });
});

app.listen(port, () => {
  console.log('We are live on ' + port);
});

【问题讨论】：

你的 index.html 是从后端渲染的吗？您的网站网址如何以：http 或 file 开头
File@kaxi1993 我没有从后端渲染它。
这就是您收到 CORS 问题 Jay Tanna 的原因
@kaxi1993 现在该怎么办？指导我

标签： javascript angularjs json node.js mongodb

【解决方案1】：

从服务器渲染index.html 将此代码添加到您的server.js 文件中

app.get('/', function(req, res) {
   res.sendFile('/absolute/path/to/index.html');
});

并在index.html中的脚本路径中添加斜杠

<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/app.js"></script>

不要访问http://localhost:8080，你会看到你的文件从这里发送帖子请求

<form ng-submit="submit($event)">
  Author:
  <input type="text" ng-model="author">
  <br>
  <br> Title:
  <input type="text" ng-model="title">
  <br>
  <br> Body:
  <input type="author" ng-model="body">
  <br>
  <br>
  <input type="submit" value="Submit">
</form>

app.js

$scope.submit = function(e) {
  e.preventDefault();
  $http({
    url: '/blah',
    method: 'POST',
    data: $scope.data
  }).then(function(httpResponse) {
    console.log('response:', httpResponse);
  })
});

【讨论】：

加载资源失败：服务器响应状态为 404（未找到）现在出现此错误
你需要为你的 index.html 文件更改 url:/absolute/path/to 我不知道它到底是什么所以添加了这个进行测试
是的，我已经改变了这一点，并且 index.html 在这方面没有显示任何问题，但是在按下提交按钮后，url 更改为 [link]localhost:8080?
试试这个：<input type="submit" value="Submit" ng-click="submit($event)"> 和 app.js $scope.submit= function(e){ e.preventDefault(); ...
不，这并没有解决问题