将项目发布到 JSON 服务器 db-Angular

Posted

技术标签:

【中文标题】将项目发布到 JSON 服务器 db-Angular【英文标题】:POST an item to JSON server db- Angular 【发布时间】:2019-10-12 16:44:22 【问题描述】:

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

注意:当我进入 GET 端点时,它工作正常。我是服务器端的新手

POST 错误 404: http://localhost:3000/addMember 的 Http 失败响应: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!');
    );

角度

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

【问题讨论】:

你能显示你的GET api代码吗?似乎您尝试在 API 中调用远程 API。我认为根本原因是您使用参数req 调用其他API。您可以尝试使用:request = require('request') 而不是 req @Scofield 我已经用 GET 代码更新了问题 看起来你在 localhost:3000 上运行的任何东西都没有一个处理程序来处理你给它的 URL 的 POST 请求...... @Scofield 我已经在使用请求,我已经在我的文件顶部定义了它 我怀疑您需要向/members 发出POST 请求,而不是/addMember 【参考方案1】:

这里的问题是您正在向 JSON 服务器无法处理的路由发出 POST 请求。将网址更改为http://localhost:3000/members,应该可以正常工作了!

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

【讨论】:

【参考方案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 请求

【讨论】:

以上是关于将项目发布到 JSON 服务器 db-Angular的主要内容,如果未能解决你的问题,请参考以下文章

如何将 JSON 数据发布到 iOS 中的服务器?

如何将json数据发布到Web服务器

Jquery Ajax 将 JSON 发布到 Web 服务

将 JSON 发布到 PHP 服务器

在计划javascript中定期将json发布到服务器

ASIHTTPRequest 将 json 发送到 php 服务器