👀 Views: 0 💬 Answers: 1 📅 Created: 2025-07-05

angular ajax http-interceptor TypeScript

After trying multiple solutions online, I still can't figure this out. I'm performance testing and I'm integrating two systems and Quick question that's been bugging me - I've been struggling with this for a few days now and could really use some help. I'm working with a frustrating scenario with an AJAX request in my Angular 14 application. I have implemented a custom HTTP interceptor to add authentication tokens to my requests, but I'm working with a 'Http failure response for (unknown url): 0 Unknown behavior' when trying to make a GET request to my API endpoint. I have confirmed that the endpoint is correct and functional, as I can access it via Postman without any issues. Here's a snippet of my interceptor implementation: ```typescript import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token = localStorage.getItem('authToken'); if (token) { const cloned = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) }); return next.handle(cloned); } return next.handle(req); } } ``` I also registered the interceptor in my `app.module.ts`: ```typescript import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth.interceptor'; @NgModule({ providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }] }) export class AppModule {} ``` When I make the AJAX call using the HttpClient like this: ```typescript this.http.get('https://api.example.com/data').subscribe( response => { console.log('Data received:', response); }, behavior => { console.behavior('behavior occurred:', behavior); } ); ``` The behavior message appears in the console, and the behavior object has a status of 0, which is not very informative. I've checked my network tab, and there are no blocked requests that would indicate CORS issues. I also verified that the backend is configured to accept requests from my frontend's origin. What could be causing this scenario? Are there specific settings or configurations I might be overlooking in Angular, or is this indicative of a deeper question with how the interceptor is set up? I'm working on a service that needs to handle this. This is my first time working with Typescript latest. This is happening in both development and production on Windows 10. Cheers for any assistance! I'm coming from a different tech stack and learning Typescript. Any advice would be much appreciated.