Issue with authentication and cross-origin resource sharing (CORS) when implementing Spring Boot, Spring Security, Vue.js,

Question

Issue with authentication and cross-origin resource sharing (CORS) when implementing Spring Boot, Spring Security, Vue.js,

Running on vue.js 3, Vite 4.0.2, axios 0.25.0, and spring boot (Starter 2.7.2).

A backend has been created in spring boot while using vue.js3, vite, and axios for the UI. Now, I simply want to make a call to rest with axios. Before implementing these functions, I tested the REST API with Postman and IntelliJ HTTP request, all successful.

The following setup is in place: Spring boot app: http://localhost:9050 Vue.js3: (where x can be 1-4).

To get this working, I checked various answers here on stackoverflow, but none provided a solution, despite extensive research.

Below is the code snippet:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true, jsr250Enabled = true)
public class WebSecurityConfig implements WebMvcConfigurer {

    // Code continues...

On the other side, in Vue. Note: * added as allow-origin just to make it work, planning a more restrictive setting later.

module.exports = {
    devServer: {
        proxy: {
            '^/api/v1/products/all': {
                target: 'http://localhost:9050/',
                ws: true,
                changeOrigin: true,
                withCredentials: true,
                // Code continues...
            },
        }
    }
}

Lastly, a script in Vue:

const { data, status } = await axios.get<GetProductPojoResponse>(
        'http://localhost:9050/api/v1/products/all',
        {
          headers: {
            Accept: 'application/json',
            // Code continues...
          },
        },
    );

    console.log(JSON.stringify(data, null, 4));

    console.log('response status is: ', status);

    return data;

Encountering CORS errors along with error 401 and 403, struggling to find an explanation...

spring spring-boot vue.js axios

Answer 1

Answer №1

When dealing with CORS errors, it's often an issue originating from the backend. It appears that you may not be clearly defining which links are allowed access to your backend. In your filterChain() method within the corsConfiguration, consider adding something like corsConfiguration.setAllowedOrigins(List.of("vueJsSiteLinkHereGoesHere"));

This is the security configuration I utilized for my Angular project. Keep in mind that I did not implement WebMvcConfigurer.

Additionally, ensure that you do not have the @CrossOrigins annotation on your controller class as it could override the settings specified here.

I am using JWT for authentication, so you may need to adjust headers according to your requirements.

package com.example.backend.security;

import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.Customizer;
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.annotation.web.configurers.oauth2.server.resource.OAuth2ResourceServerConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;

@EnableWebSecurity
@EnableMethodSecurity()
@Configuration
@RequiredArgsConstructor
public class SecurityConfig {
    private final AppProperties appProps;
    private static final String[] WHITELISTED_URLS = {
            "/auth/**",
    };

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .cors(Customizer.withDefaults()) // by default, use a bean of the name corsConfigurationSource
                .csrf(AbstractHttpConfigurer::disable) // not really needed in REST
                .authorizeHttpRequests((requests) -> requests
                        .requestMatchers(new AntPathRequestMatcher("/h2/**")).permitAll()
                        .requestMatchers(WHITELISTED_URLS).permitAll()
                        .anyRequest().authenticated()
				)
                .oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt)
                .sessionManagement((session) -> session
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                );
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of(appProps.getFrontendSite()));
        configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"));
        configuration.setAllowedHeaders(List.of("Authorization", "Access-Control-Allow-Origin", "Content-Type",
                "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers"));
        configuration.setAllowCredentials(false); // we're using jwt
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

For further information, check out this video by Dan Vega on YouTube. He also covers some related content on Vue: https://youtu.be/HRwlT_etr60

Answer 2

When dealing with CORS errors, it's often an issue originating from the backend. It appears that you may not be clearly defining which links are allowed access to your backend. In your filterChain() method within the corsConfiguration, consider adding something like corsConfiguration.setAllowedOrigins(List.of("vueJsSiteLinkHereGoesHere"));

This is the security configuration I utilized for my Angular project. Keep in mind that I did not implement WebMvcConfigurer.

Additionally, ensure that you do not have the @CrossOrigins annotation on your controller class as it could override the settings specified here.

I am using JWT for authentication, so you may need to adjust headers according to your requirements.

package com.example.backend.security;

import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.Customizer;
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.annotation.web.configurers.oauth2.server.resource.OAuth2ResourceServerConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;

@EnableWebSecurity
@EnableMethodSecurity()
@Configuration
@RequiredArgsConstructor
public class SecurityConfig {
    private final AppProperties appProps;
    private static final String[] WHITELISTED_URLS = {
            "/auth/**",
    };

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .cors(Customizer.withDefaults()) // by default, use a bean of the name corsConfigurationSource
                .csrf(AbstractHttpConfigurer::disable) // not really needed in REST
                .authorizeHttpRequests((requests) -> requests
                        .requestMatchers(new AntPathRequestMatcher("/h2/**")).permitAll()
                        .requestMatchers(WHITELISTED_URLS).permitAll()
                        .anyRequest().authenticated()
				)
                .oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt)
                .sessionManagement((session) -> session
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                );
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of(appProps.getFrontendSite()));
        configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"));
        configuration.setAllowedHeaders(List.of("Authorization", "Access-Control-Allow-Origin", "Content-Type",
                "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers"));
        configuration.setAllowCredentials(false); // we're using jwt
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

For further information, check out this video by Dan Vega on YouTube. He also covers some related content on Vue: https://youtu.be/HRwlT_etr60

Answer 3

Answer №2

There are several approaches to solving this issue:

First, in the Backend code, you can set the allowed origin patterns to List.of("*").

However, this is not the most ideal solution.

Another workaround involves copying the distribution files into the target folder and configuring a forwarding to index.html.

It seems crazy that making REST requests in a non-browser environment always succeeds without any cross-site errors...

Answer 4

There are several approaches to solving this issue:

First, in the Backend code, you can set the allowed origin patterns to List.of("*").

However, this is not the most ideal solution.

Another workaround involves copying the distribution files into the target folder and configuring a forwarding to index.html.

It seems crazy that making REST requests in a non-browser environment always succeeds without any cross-site errors...

Issue with authentication and cross-origin resource sharing (CORS) when implementing Spring Boot, Spring Security, Vue.js,

Answer №1

Answer №2

Similar questions

Converting HTML elements into Vue.js Components

Troubleshooting Tips for Resolving Problems with VueJS getElementById Bug

Does Vuejs have a counterpart to LINQ?

Information displays instantly in the initial milliseconds

Vue project encountering issue with displayed image being bound

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

Errors in vue.js conditions

What are the best practices for utilizing bootstrap-vue's panel component effectively?

Creating a bar chart in Chart JS using an array of data objects

What's the most effective method to incorporate additional events into this element using the conditional operator?

Error in vue.js: Unable to call this.$emit as it is not a function

The functionality of the Vueify modal seems to be malfunctioning when incorporating Vueify alongside a central Modal.vue file that houses modal templates

The Vue.js error message "Unable to access property 'array_name' as it is undefined" indicates an issue with

Clicking on a Vuetify v-btn with the :href attribute set to download will open the XML file

Ways to remove items from Vuex store by utilizing a dynamic path as payload for a mutation

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

Ways to transmit information among Vue components

Guide on utilizing map function in JavaScript and Vue to generate a fresh array

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

Is the popup not opening with just one click?