Super easy trick to bypass Http Interceptors in Angular

Super easy trick to bypass Http Interceptors in Angular

BONUS: Searching for a better folder structure for angular projects? check it out and you can thank me later.

Searching for a better folder structure for angular projects? Check this article out, you can thank me later.

Image for post

Photo by Amir samoh on unsplash

Recently, I have been working on a task, regarding AWS S3 bucket file uploading using Angular and preSigned URLs. In that project, I have used HTTP interceptor to handle my request to bind all header parameters. My problem arose while I was trying upload files and found that I wasn’t able to since there were “two Authorization headers” in that request. They were the usual request header with token and the header which auto binds by the presigned Url. To solve this issue, I found a super-easy solution that allowed me to bypass my HTTP interceptor and BOOM! Issue fixed. Let’s dive into what I did.

Wait… What is an Interceptor?

Before starting the explanation of my trick, let’s get to know what interceptors are and how we can use them.

Angular is one of the most popular front-end development frameworks in the developer community. One of the main reasons for that is that Angular provides many built-in tools that help to scale industry level JavaScript applications. Interceptors are one of the tools in the list capable of handling HTTP requests globally. They allow us to intercept incoming and outgoing HTTP requests using the HttpClient. By intercepting the request we can modify or change any parameter of the request.

Before diving any deeper I suggest that you have a basic knowledge of Angular HTTP Client and RxJS Observable.

Here is the trick

As I mentioned above, there are occasions where we need to allow for a custom header (or, in other words, to skip the interceptor action in http requests).

BONUS POINT:_ Usually in Angular best practices, it is better to keep our services separate from modules, components and models etc. Please checkout the below folder structure. It is better if you can refer to this structure for your future implementations._

src
 ┣ app
 ┃ ┣ common
 ┃ ┣ customer
 ┃ ┣ models
 ┃ ┣ public
 ┃ ┣ services
 ┃ ┃ ┣ authentication
 ┃ ┃ ┃ ┣ guards
 ┃ ┃ ┃ ┃ ┣ auth.guard.ts
 ┃ ┃ ┃ ┣ interceptors
 ┃ ┃ ┃ ┃ ┣ response.interceptor.ts
 ┃ ┃ ┃ ┗ auth.service.ts
 ┃ ┃ ┣ directives
 ┃ ┃ ┣ pipes
 ┃ ┃ ┣ resolvers
 ┃ ┃ ┣ services-api
 ┃ ┃ ┣ services-inter
 ┃ ┣ app.component.css
 ┃ ┣ app.component.html
 ┃ ┣ app.component.spec.ts
 ┃ ┣ app.component.ts
 ┃ ┣ app.module.ts
 ┃ ┣ app.routing.ts
 ┃ ┗ app.server.module.ts
 ┣ assets
 ┣ environments
 ┣ favicon.ico
 ┣ index.html

As per the file tree, I kept my interceptors inside the _src/services/interceptors _folder.

Image for post

http-interceptors angular http-client programming http-request

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Testing Angular HTTP Communication

Angular has great built-in tools for making web requests. It also contains a great module for testing HTTP communication: HttpClientTestingModule. This module contains full toolbox to ensure web communication happens as intended by the developer.

How to Make HTTP Requests with Angular 11 HttpClient API

This step by step guide helps you ascertain the usage, implementation, on top of that, the benefits of HttpClient API in the Angular 11 application. It also enables you to answer how to make HTTP (HTTP POST, GET, PUT, and DELETE) Requests. How to Make HTTP Requests with Angular 11 HttpClient API

Better Http request with interceptors in Angular 8 and beyond

Dealing with API based token is sometimes cumbersome. Due to the fact that, on every request, we have to send a token as parameter to be able to reach out the server. In Angular, it becomes easier with the help of HttpClient interceptors. In this…

Angular HttpClient Module | Angular Http GET, POST Example

Angular HttpClient is inbuilt module that helps us to send network requests to any server. Angular HttpClientModule is used to send GET, POST request.