javascript - 如何将数据从 Angular 服务发布到 Node ？

Question

我正在尝试将来自 Angular 服务的数据发布到快速路由，但我没有将数据发送到后端，我从组件收到了对象，现在将其传递到 Node ，但没有到达那里，我已将 bodyParser 添加到 server.js ，知道是什么 Angular 边缺失？

搜索.component.ts

this.searchService.getSearch(this.searchObj1).subscribe(searchObj => {
         // this.detailService.changeMessage(searchObj.data)
       consle.log(searchObj);
        });

搜索.service.ts

    import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {

  constructor(private http: Http) { }
     getSearch(searchObj:{}) {
       let body = JSON.stringify(searchObj);
       console.log('Fac',body);
        return this.http.post('/api/search',body)
          .map(res => res.json());
      }

}

路由/api.js

    const express = require('express');
const router = express.Router();
const request = require('request');

// declare axios for making http requests
const axios = require('axios');
const API = 'https://jsonplaceholder.typicode.com';
    router.post('/search', (req, response) => {
      // Get posts from the mock api
      console.log('CLientReq',req.body);
       request.post('http://sla/service/getHistoricEvents',
       { json: true,
         body: req.body,
         proxy:'http://one.proxy.att.com:8080',
         headers: {
         "content-type": "application/json",
         "authorization": "Basic bTA5NDg1QGNvbXMuYXR0LmNvbTpjYnVzTVNAMjAxNw=="
        }
       },
       function(err, res, body) {
         response.status(200).json(body);
       }
       );
    });

服务器.js

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');



// Get our API routes
const api = require('./server/routes/api');
const Oploggery = require('Oploggery');



const app = express();

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));

// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});


const port = process.env.PORT || '3000' || '4200';
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);


server.listen(port, () => console.log(`API running on localhost:${port}`));

Answer 1

虽然 @angular/http 和 Http 类没有任何问题，但它们现在在 Angular 5 中已被弃用，并且自 4.3 起就有替代品，请尝试 HttpClient 类改为:

constructor(private httpClient: HttpClient) { }

getSearch(searchObj:{}) {
  console.log('Fac', searchObj);
  return this.httpClient.post('/api/search', searchObj);
}

我怀疑您的问题可能与 header 或编码有关，HttpClient 通常不会像 Http 那样出现那么多问题。它还不需要使用 res.json() 映射响应。

<小时/>

您可能已经这样做了，只是没有发布它，但您需要从 api.js 文件导出您的 router 对象:

module.exports = router;

另一个问题是服务器没有将 CORS header 发送回客户端，解决此问题的最简单方法是使用 cors 库:https://github.com/expressjs/cors

最简单的是，您可以对 server.js 文件执行以下操作:

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
const cors = require('cors'); // Add this after installing the cors library.

// Get our API routes
const api = require('./server/routes/api');
const Oploggery = require('Oploggery');
const app = express();

app.use(cors()); // Add this.

但如果您要使用 CORS 和 cors 库，我强烈建议您阅读它。