Angular 15无法发送HTTP请求，求技术排查解决

核心问题1：takeUntil销毁流未正确初始化 #

你的destroy变量仅声明类型但未赋值，takeUntil操作符需要传入Observable类型的销毁流（通常用Subject实现），当前this.destroy为undefined，会导致Observable立即完成，HTTP请求的订阅根本不会执行。

修复后的组件代码：

import { Component, OnDestroy } from '@angular/core';
import { takeUntil, Subject } from 'rxjs';
import { MainFeedService } from 'src/services/main-feed.service';

@Component({
  selector: 'app-main-feed',
  templateUrl: './main-feed.component.html',
  styleUrls: ['./main-feed.component.scss'],
})
export class MainFeedComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  totalPosts = 0;
  userId = 'test';

  constructor(private mainFeedService: MainFeedService) {}

  ngOnInit() {
    this.mainFeedService
      .getMainFeed(this.userId)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (res) => {
          console.log('RES', res);
          this.totalPosts = res.totalPosts;
        },
        error: (err) => {
          console.error('请求错误:', err);
        }
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

核心问题2：服务导入路径不匹配 #

组件中导入的服务路径是src/services/trades.service，但你的服务类名为MainFeedService，文件名大概率应为main-feed.service.ts，请确认导入路径是否正确，否则会导致服务注入失败，请求无法发送。

其他排查点 #

• 跨域限制：Postman不受浏览器同源策略限制，但前端项目若运行在非3000端口，需后端配置CORS允许前端域名访问，或在Angular中配置代理：
  1. 在angular.json的serve.options中添加：

     "proxyConfig": "src/proxy.conf.json"
     

  2. 创建src/proxy.conf.json：

     {
       "/local/*": {
         "target": "http://localhost:3000",
         "secure": false,
         "changeOrigin": true
       }
     }
     

  3. 服务中请求改为相对路径：

     return this.http.get<{ records: any; totalPosts: number }>('/local/main-feed', { params });
     

• 浏览器控制台排查：打开开发者工具的Console和Network面板，查看是否有报错信息、请求是否发送、响应状态码，这是排查HTTP请求问题最直接的方式。

内容的提问来源于stack exchange，提问作者user6680