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:

Local Storage for Token:

Error Message in Browser Console:

Error Message from Spring Boot Java Console:

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:

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:

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

Refreshing the page after making an API call does not result in updated data

Improving Angular 2 Charts with Multiple Chart Updates

Break up every word into its own separate <span>

Using the locale identifier en-GB can lead to date formats being displayed incorrectly

The variable "theme" is referenced prior to being initialized

End the pipeline execution in a chain of RxJS observables

Attempting to create a function that can accept two out of three different types of arguments

Modifying the interface state in React with TypeScript is not permitted

Utilizing a class structure to organize express.Router?

Angular - Monitoring Changes in Variables

Unable to access the correct item from local storage while a user is authenticated

The implementation of the new package is causing a disruption in my project

Tips for verifying the presence of a value within an array using checkboxes

Utilizing dispatch sequentially within ngrx StateManagement

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

Why does it seem like Typescript Promise with JQuery is executing twice?

Combine arrays of objects by comparing two attributes in Typescript

Only the final defined document is instantiated by the Swagger-ui-express module

Can someone guide me on incorporating static methods into a Mongoose model using TypeScript for Mongoose version 5.11?

Sending properties of an element to a function within Angular version 4 or 5