无法将 Express.js 服务器连接到 Angular 前端

Question

我创建了一个 Node.js 应用程序和一个 Angular 应用程序。我需要从数据库中获取数据并将数据存储到数据库中。我在将 Express.js 服务器连接到 Angular 应用程序时遇到问题。

文件user.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from '../User';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BASE_URL } from '../const/config';
import { MONGO_EXPRESS_URL } from '../const/config';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(`${MONGO_EXPRESS_URL}/fetchdata`);
  }
}

文件users.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/services/user.service';
import { User } from '../../User';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.userService.getUsers().subscribe((users) => (this.users = users));
  }
}

当我运行 Angular 应用程序时弹出此错误：

文件server.js

app.use("/", router);

app.listen(port, function () {
  console.log("Server is running on Port: " + port);
});

router.route("/fetchdata").get(function (req, res) {
  users.find({}, function (err, result) {
    if (err) {
      res.send(err);
    } else {
      res.send(result);
    }
  });
});

Answer 1

它在您的 Node.js 上看起来应该是这样的。您应该像这样设置 Express.js 服务器：

constructor() {
  this.app = express()
}

Initialize{
    this.app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
      res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT');
      if('OPTIONS' === req.method){
        res.sendStatus(200);
      }
      else {
          next();
      }
    })

  this.app.use(RouterWebservices)

    this.app.listen(your.HttpPort, your.Ip, () => {
      console.log('Server now listening at ', your.HttpPort, 'IP ', your.Ip);
    })
}

然后您需要在 router.webservice.ts 文件中声明您的变量：

export const RouterWebservices = express.Router()

RouterWebservices.get('/fetchdata', FetchWebservice)

并编写一个 FetchWebserivce，您只需用数据回答请求。

Answer 2

问题出在路由上：https://localhost:4000.

它将是 http://localhost:4000（http:// 而不是 https://）。

无法将 Express.js 服务器连接到 Angular 前端

Can’t connect Express.js server to the Angular frontend

angularjs

angular

typescript

mongodb

express

文件user.service.ts

文件users.component.ts

文件server.js