Why do I get 2 different HttpStatus codes with the same request and same code in 2 different environments?

Question

I have an Angular app in which I have

RouterModule.forRoot([
  ...ContentRoutes,
  // this path acts like an "otherwise", so it must be the last one
  {
    path: '**',
    redirectTo: 'home',
  },
], {
  paramsInheritanceStrategy: 'always',
  onSameUrlNavigation: 'reload',
  scrollPositionRestoration: 'enabled'
})

Therefore, if I navigate with my browser to an image that doesn't exist http://localhost:4200/assets/images/some_image_that_doesnt_exist.jpg

I get redirected to the home page. However, if I do the same request with Postman, I get a 404 response.

On the other hand, if I load the application to an Azure server, when I navigate to http://<my_webpage>.azurewebsites.net/assets/images/some_image_that_doesnt_exist.jpg I also get redirected to the main page, but when I do that request with postman, I get a 200 response and the home content.

Do you have any idea of a possible reason that could explain this difference?

Remark: the reason behind this question is trying to show an alternate image instead of showing a 404 error when the image doesn't exist. I created an endpoint in my C# Backend that checks if the image exists or not, but after the implementation, it works locally but it doesn't work on the server because I am not getting 404 errors...

Answer 1

Why it's returning 200

Angular app is just a bunch of static files as any other website. When you develop it locally you are running a simple server that serves your static files and also has a WebSocket connection in order to reload the page when the rebuild happens.

In production it's usually served on a static host. In AWS it's S3 bucket. In it's called Azure Blob Storage.

Both AWS and Azure allow you to turn your storage into a static web server (what Angular actually needs). After that, Azure manages incoming requests to the storage and returns a corresponding file.

Since the app and the static files are accessed by the same URL you usually configure a 404 page case to return index.html with status code 200. Otherwise, routing won't work as it's done by the JS code included in the index.html.

How to fix

If you are using an SSR (Server Side Rendering) then it's usually done by a NodeJS server and 99% chance you are using Express. There, you have app routing handlers which do the render. Also, you have a middleware that will resolve static files.

With a storage working as a static web hosting usually you can only statically set a custom page redirect page for 404. To return a custom image you would need to spin up your own reverse-proxy like NGINX and manually distinguish which requests are navigation related and which are assets related. Then you can return a fallback image.

Use Angular to provide a fallback image

You could use a directive that would be applied to an image. The element has an onerror event which is called if the image fails to load. Then, you can replace the link to use a fallback image.

@Directive({
  selector: '[fallbackImg]',
  standalone: true,
})
class ImgDirective {
  @HostBinding('src')
  src: string;

  @HostListener('error', ['$event'])
  onError(e) {
    console.log(e)
    this.src = 'fallbackurl'
  }
}