[Vuejs]-Spring security is blocking Vue.js pages | receiving 403 error

3👍

When I have it setup the first way and run the frontend and backend on different ports, it works perfectly.

I wonder if this is due to the CORS policy being invoked. Otherwise, Spring Security doesn’t take the port number into consideration when making authorization decisions.

When I have the Configuration set this way, it blocks the pages –

That’s because you have this line:

.anyRequest().authenticated()

It means that any URL, including JS files, will require authentication.

When I have it set up this way, it shows the pages AND the data from my api’s

That’s because you have this line:

.antMatchers("/**").permitAll()

It means that any URL is permitted.

The DSL processes URLs in the order the paths are declared. I think you want a hybrid of the two. Something like this:

.antMatchers("/api/v1/authenticate", "/api/v1/register", "/css/**","/js/**").permitAll()
.anyRequest().authenticated()

This means that the two /api endpoints all /css endpoints and all /js endpoints won’t require authentication, but everything else will.

Consider making the permitAll as narrow as you can — it’s not clear to me whether you really want all your JS files to not require authentication.

0👍

@jzheaux your root comment led me to the answer.

This was the change I made and it works just as I need it to now. Thanks for the guidance!

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate","/api/v1/register","/static/**","/").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

Leave a comment