Angular HttpErrorResponse 403 on Visual Studio Code console

Question

I'm using Angular 17.3.8 with a non-standalone project, and I'm encountering an error in my VSCode console that I can't understand. I've created a login system with cookies, and it works fine. The backend sends me the cookie, Angular receives it, and I can make POST, PUT, GET, and DELETE HTTP requests without issues.

When I use the following code, it works fine because I have to press the HTML button to fetch the backend information:

Angular Component:

export class AvailableCodesComponent {

  codesThirtyMinutes: Code[] = [];
  codesEightHours: Code[] = [];

  constructor(private codeService: CodeService ) { }


  public getAll(){
    this.codeService.getAllCodes().subscribe(
      (codes: any) => {
        console.log(codes);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

Html:

  <button (click)="getAll()">GetAll</button>

Result:

On the other hand, i when i use ngOninit and i modify my code like this

export class AvailableCodesComponent implements OnInit{

  codesThirtyMinutes: Code[] = [];
  codesEightHours: Code[] = [];

  constructor(private codeService: CodeService ) { }

  ngOnInit(): void {
    this.getAll();
  }

  public getAll(){
    this.codeService.getAllCodes().subscribe(
      (codes: any) => {
        console.log(codes);
      },
      (error) => {
        console.error(error);
      }
    );
  }

The browser show the information right, but Vscode console show this 403 ErrorResponse

Vscode Console:

  status: 403,
  statusText: 'Unknown Error',
  url: 'http://localhost:8080/code/getall',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for http://localhost:8080/code/getall: 403 ',
  error: null

As you can se the the browser says yes and vscode console says no, and i don't know why. Credentials are valid, cookies are sent in each request. What should i do ? or I just ignore this vscode error ?

Answer 1

You have SSR enabled, the server is doing the request for you.

you probably want to disable SSR by replacing the ssr entry in angular.json with ssr: false.