看起来你在把测试应用接入Reddit API时遇到了麻烦，我先帮你分析下代码里的几个关键问题，这些大概率是导致报错的核心原因：

1. 使用了已废弃的Http模块 #

Angular在4.3版本之后就推出了HttpClient来替代旧的Http模块，旧模块不仅不再维护，还可能和新版本Angular的依赖产生冲突，这是常见的报错来源。

2. 缺少Reddit API强制要求的User-Agent请求头 #

Reddit的API规则明确要求所有请求必须携带唯一的User-Agent标识，用来区分不同的应用，没有这个头的话，Reddit会直接拒绝你的请求（通常返回403或429错误）。

3. 浏览器同源策略导致的CORS错误 #

直接从前端浏览器请求Reddit API会触发跨域问题，浏览器的同源策略会拦截不同域名的请求，这也是你可能遇到的核心报错原因之一。

4. 手动拼接URL参数的潜在风险 #

直接把参数拼在URL里可能会遇到字符编码问题，比如category包含特殊字符时，请求会失效。

修复后的完整代码示例 #

我帮你重构了reddit.service.ts，解决了上面所有问题：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // Angular 6+推荐的注入方式，无需在模块中手动声明
})
export class RedditService {
  private baseUrl = 'https://www.reddit.com/r';

  // 自定义User-Agent，替换成你的应用信息（必填）
  private readonly headers = new HttpHeaders({
    'User-Agent': 'MyTestRedditApp/1.0.0 (https://my-test-app.com; my-test-email@example.com)'
  });

  constructor(private http: HttpClient) { }

  getPosts(category: string, limit: number): Observable<any> {
    // 使用HttpParams安全构建请求参数，避免编码问题
    const params = new HttpParams()
      .set('limit', limit.toString());

    // 使用JSONP绕过CORS限制（Reddit API原生支持JSONP）
    return this.http.jsonp(
      `${this.baseUrl}/${category}/top.json`,
      'callback',
      { params, headers: this.headers }
    );
  }
}

配套的AppModule配置 #

你需要在根模块中导入HttpClientModule和HttpClientJsonpModule，才能让上面的代码正常工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // 必须导入，支撑HttpClient功能
    HttpClientJsonpModule // 用于JSONP请求解决CORS问题
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外说明 #

如果你不想用JSONP，也可以通过Angular代理来解决CORS问题：

1. 在项目根目录创建proxy.conf.json文件：

{
  "/api": {
    "target": "https://www.reddit.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

2. 修改reddit.service.ts中的baseUrl为'/api/r'，然后用普通的http.get请求即可，不需要JSONP。

最后，记得不要频繁发送请求，Reddit API有请求频率限制，超过限制会返回429错误。

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