Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Question

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Despite checking numerous sources online, I am facing a persistent issue with my Angular application. The problem arises when using HttpClient along with an Angular interceptor to set headers for authentication in my Java Rest API using JWT tokens. The interceptor seems to malfunction, resulting in the Java side receiving a null token and generating errors. Any assistance would be highly appreciated.

Upon closer inspection, it appears that the root of the issue lies within Spring Security. After debugging, it was revealed that the options request all filter lacks the necessary header, ultimately causing token-related exceptions. Potentially allowing bypass for option method requests could resolve the problem.

Snippet of the Spring Boot Security Configuration:

(Security Config code here)

Code snippet of the Angular Interceptor:

(Angular Interceptor code here)

Code snippet of the Angular Service:

(Angular Service code here)

Method Call:

(Method call code here)

Browser Network Results:

https://i.sstatic.net/Dvx61.png

Local Storage for Token:

https://i.sstatic.net/vGuus.png

Error Message in Browser Console:

https://i.sstatic.net/K7Drm.png

Error Message from Spring Boot Java Console:

https://i.sstatic.net/4djXE.png

angular spring typescript spring-boot spring-security

Answer 1

Answer №1

In the JwtSecurityConfig file, it is important to include the OPTIONS call in order for the JWT security to work properly without requiring an authentication token.

@Override
protected void configure(HttpSecurity http) throws Exception {

    http.csrf().disable()
            .authorizeRequests()
            // Ensure this line is included in your implementation
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
            .antMatchers("**/rest/**").authenticated()
            .and()
            .exceptionHandling().authenticationEntryPoint(entryPoint)
            .and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

    http.addFilterBefore(authenticationTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    http.headers().cacheControl();

}

Answer 2

In the JwtSecurityConfig file, it is important to include the OPTIONS call in order for the JWT security to work properly without requiring an authentication token.

@Override
protected void configure(HttpSecurity http) throws Exception {

    http.csrf().disable()
            .authorizeRequests()
            // Ensure this line is included in your implementation
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
            .antMatchers("**/rest/**").authenticated()
            .and()
            .exceptionHandling().authenticationEntryPoint(entryPoint)
            .and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

    http.addFilterBefore(authenticationTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    http.headers().cacheControl();

}

Answer 3

Answer №2

While the Angular interceptor may seem like a good solution, there seems to be a CORS policy error in your browser console. Your Angular application is running on port 4200, while your backend is running on port 8095 (different hosts).

I am not familiar with spring-boot, but after reviewing the documentation, it appears that you need to add some CORS policies to the backend application. These policies may differ for production and development environments:

https://i.sstatic.net/32aop.png

For more information, you can refer to this link:

Currently, your request to /allUser is not being sent. Once you resolve the CORS issue, everything should function properly.

Answer 4

While the Angular interceptor may seem like a good solution, there seems to be a CORS policy error in your browser console. Your Angular application is running on port 4200, while your backend is running on port 8095 (different hosts).

I am not familiar with spring-boot, but after reviewing the documentation, it appears that you need to add some CORS policies to the backend application. These policies may differ for production and development environments:

https://i.sstatic.net/32aop.png

For more information, you can refer to this link:

Currently, your request to /allUser is not being sent. Once you resolve the CORS issue, everything should function properly.

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Answer №1

Answer №2

Similar questions

Developing a Link Element in Angular 2

Why Mixin Class inference is not supported in Typescript

Converting a file into a string using Angular and TypeScript (byte by byte)

Using conditional statements to render content based on a certain condition within a

A guide to using Angular to emphasize text based on specific conditions met

How to dynamically add a route from an HTTP API to the app-routing.module.ts file in Angular 10

Creating a fresh JSON structure by utilizing an established one

What is the best way to create a universal limitation for a larger collection of a discriminated union?

Is there a way to transform a JSON object into a custom JavaScript file format that I can define myself?

Exploring the routing hierarchy in Angular: Setting up parent and child

The issue here pertains to npm's inability to successfully retrieve a required dependency for download

"Learn the trick of converting a stream into an array seamlessly with RxJs.toArray function without the need to finish the

What is the best way to exclude the bottom four rows when sorting with MatSort?

Angular (version 2.4.5) is throwing an error stating that you cannot bind to the 'ngTemplateOutletContext' property because it is not recognized as a valid property of the 'ng-container' component

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

The output from Angular Validator.pattern() may differ from that generated by online regex engines

The function causes changes to an object parameter once it has been executed

The kendo-grid-messages are utilized across all columns

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Issue with redirecting to another link in Angular routing