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

Posted 2023-03-13

【中文标题】无法将 Express.js 服务器连接到 Angular 前端

【英文标题】：Can’t connect Express.js server to the Angular frontend

【发布时间】：2021-11-06 18:14:16

【问题描述】：

我创建了一个 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);
    
  );
);

【参考方案1】：

问题在于路由：https://localhost:4000。

应该是 http://localhost:4000（http:// 而不是 https://）。

【讨论】：

它的原因是什么？为什么它不适用于HTTPS？背后有故事吗？最好通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来好像是今天写的）。

【参考方案2】：

它在您的 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，您只需在其中用数据回答请求。

【讨论】：

嘿，我在问题中添加了 /fetchdata 路由，如果需要更改，请告诉我。谢谢