POST 一个项目到 JSON 服务器数据库- Angular

Question

我正在尝试 POST 一个项目到我 json 服务器中的数据库。我正在从 Angular 发送 POST 请求。当我这样做时，出现以下错误：

注意：当我在 GET 端点执行 get 时，它工作正常。我是服务器端的新手

POST ERROR 404: Http failure response for http://localhost:3000/addMember: 404 Not Found

SERVER.JS

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();
....

app.use(cors());
app.use(express.static('assets'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.disable('x-powered-by');
app.use(xssFilter());
app.use(nosniff());
app.set('etag', false);
app.use(
  helmet({
    noCache: true
  })
);
app.use(
  hsts({
    maxAge: 15552000 // 180 days in seconds
  })
);

app.use(
  express.static(path.join(__dirname, 'dist/softrams-racing'), {
    etag: false
  })
);

app.get('/api/members', (req, res) => {
  request('http://localhost:3000/members', (err, response, body) => {
    if (response.statusCode <= 500) {
      res.send(body);
    }
  });
});

// TODO: Dropdown!
app.get('/api/teams', (req, res) => {
  request('http://localhost:3000/teams', (err, response, body) => {
    if (response.statusCode <= 500) {
      res.send(body);
    }
  });
});

    // Submit Form!
    app.post('/api/members', function(request, response) {
  request.post('http://localhost:3000/members', (err, response, body) => {
    if (response.statusCode <= 500) {
      req.send(body);
    }
  });
});



  app.get('*', (req, res) => {
      res.sendFile(path.join(__dirname, 'dist/softrams-racing/index.html'));
    });

    app.listen('8000', () => {
      console.log('Vrrrum Vrrrum! Server starting!');
    });

ANGULAR

addMember(memberForm: Member) {
    this.http.post(`${this.api}/addMember`, memberForm).subscribe(
      data => {
        console.log('POST Request is successful ', data);
      },
      error => {
        console.log('Error', error);
      }
    );
  }

更新：在我的控制台中，我看到这个 POST /addMember 404 12.105 ms - 2，如果我直接在浏览器中转到 http://localhost:3000/addMember，我会看到一个空对象 {}，如果我到这里 http://localhost:3000/，我会看到这条消息 要访问和修改资源，您可以使用任何 HTTP 方法 GET POST PUT PATCH DELETE OPTIONS

Answer 1

这里的问题是您正在向您的 JSON 服务器不处理的路由发出 POST 请求。将 URL 更改为 http://localhost:3000/members，它应该可以正常工作！

（json-server 上的路由对应于 db.json 文件中的元素。）

Answer 2

尝试像这样更改您的代码：

addMember(memberForm: Member) {
    this.http.post(`${this.api}/api/addMember`, memberForm).subscribe(
      data => {
        console.log('POST Request is successful ', data);
      },
      error => {
        console.log('Error', error);
      }
    );
  }

从错误中可以看出，您的服务正在等待 http://localhost:3000/api/addMember 的请求，但您的 console.log 显示您正在 http://locatlhost:3000/addMember[=] 发送 post 请求13=]

POST 一个项目到 JSON 服务器数据库- Angular

POST an item to JSON server db- Angular

node.js

angular

express

mean-stack

json-server