Angular 15调用自研HTTP接口时出现“Unkown error”问题求助

核心原因 #

这是浏览器的**混合内容（Mixed Content）**安全限制导致的：如果你的网站通过HTTPS协议访问，浏览器会默认阻止页面向HTTP协议的接口发起请求，以此避免不安全内容加载，这就是你看到"Unknown error"的根本原因。Angular本身没有类似Android里allowcleartext=true的配置，因为这是浏览器层面的安全策略。

解决方案 #

1. 优先迁移自研接口到HTTPS（推荐） #

这是最合规且长期有效的方案，当前主流浏览器对HTTP资源的限制越来越严格，将学校服务器的接口改为HTTPS可彻底解决问题。

2. 本地开发临时解决：允许浏览器加载不安全内容 #

仅适用于本地开发测试，可手动配置Chrome浏览器允许当前网站加载HTTP内容：

• 打开Chrome设置 → 隐私和安全 → 网站设置 → 不安全内容
• 找到你的网站域名（如localhost:4200），设置为「允许」
  注意：此方法不能要求生产环境用户操作。

3. 使用Angular代理转发请求（开发/测试环境适用） #

通过Angular代理功能，将前端请求转发到HTTP接口，绕过浏览器混合内容拦截：

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

{
  "/api": {
    "target": "http://[你的学校服务器完整地址]",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改angular.json中的serve配置，添加代理文件路径：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-project-name:build",
      "proxyConfig": "proxy.conf.json"
    }
  }
}

3. 修改LoginService中的请求地址为相对路径：

@Injectable({
  providedIn: 'root',
})
export class LoginService {

  constructor(private httpClient: HttpClient) {}

  public login(userName: string, password: string): Observable<UserRemote> {
    return this.httpClient
      .get<UserRemote>(
        `/api/users/login?username=${userName}&password=${password}`
      )
      .pipe(
        catchError((error) => {
          console.log('Error details: ', error);
          return throwError(() => error.message || '登录请求失败');
        }),
      );
  }
}

关于sanitizer的说明 #

sanitizer.bypassSecurityTrustResourceUrl用于处理HTML资源（如图片、iframe的src属性）的安全信任标记，和HTTP请求的拦截机制无关，对你的问题不适用。

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