使用 Angular2 应用调用 NodeJs API

Question

对于一个项目，我需要使用 Angular 制作一个应用程序，我必须在其中从数据库中获取数据。所以我用 NodeJs 创建了一个 API 来处理连接并获取我的数据。

但是现在用我的 Angular 应用调用这个 API 有问题，我先给你看我的代码

这里是我尝试返回数据以使用它的组件：(something.component.ts)

onGetData(){
  this.foncService.getData()
  .subscribe((data) => {
    console.log(data);
  },(error) => {
    console.log("error : ", error);
  });  
}

我在这里调用我的 API：(something.service.ts)

getData(){
  return this.httpClient.get('localhost:3000/api/data').map(res => res);
}

我在这里从我的 API 中的数据库获取数据：(api.js)

function getAllDatas(req, res, next) {
  db.any('select * from dat')
  .then(function (data) {
    res.status(200)
    .json({
      status: 'success',
      data: data,
      message: 'done'
    });
  })
  .catch(function (err) {
    return next(err);
  });
}

API 运行良好，当我单独使用它时，我得到了正确的数据。

好吧，当我想使用我的数据时，问题出在组件上，所以问题可能来自我的服务，idk :(，所以我的错误如下：

当我想在互联网上搜索这个错误时，我总是陷入 CORS 问题，但我想我已经配置了它

api.js

var cors = require('cors');
app.use(cors())

//or I also tried

app.use(function(req, res, next) { 
  res.header("Access-Control-Allow-Origin", "*"); 
});

Answer 1

是的，这似乎是 CORS 问题，您解决它的方法是一种方法，另一种方法是使用 angular 的 proxy.config.json 文件，它将所有传入请求重新写入代理端口。因此，您将重写到后端端口，而不是 4200。

那你就ng serve --proxy-config proxy.conf.json

如：

https://itnext.io/angular-cli-proxy-configuration-4311acec9d6f

颜色我不确定，抱歉。