我运行的是vue.js 3，带有Vite 4.0.2、axios 0.25.0和Spring启动（启动器2.7.2）。
我已经在spring boot中创建了一个后端，同时使用vue.js3，vite和axios作为UI。现在，我只想用axios调用rest。就在我实现这些函数之前，我用postman和intelliJ http-request测试了rest api。所有这些都是成功的。
正在运行以下安装程序： Spring 开机应用：网址：（其中x在1 - 4之间）。
为了让这个运行，我在stackoverflow这里检查了很多答案，但没有一个带来解决方案，也没有很多研究一般。
下面是代码：

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

    @Bean
    public UserDetailsService userDetailsService(BCryptPasswordEncoder bCryptPasswordEncoder) {
        InMemoryUserDetailsManager manager = new InMemoryUserDetailsManager();
        manager.createUser(User.withUsername("user")
                .password(bCryptPasswordEncoder.encode("userPass"))
                .roles("USER")
                .build());

        manager.createUser(User.withUsername("admin")
                .password(bCryptPasswordEncoder.encode("adminPass"))
                .roles("USER", "ADMIN")
                .build());
        return manager;
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedHeaders(List.of("Authorization", "Cache-Control", "Content-Type"));
        corsConfiguration.setAllowedOrigins(List.of("*"));
        corsConfiguration.setAllowedMethods(List.of("GET", "POST", "OPTIONS", "PUT", "DELETE"));
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setExposedHeaders(List.of("Authorization"));

        http.csrf()
                .disable()
                .cors().configurationSource(r -> corsConfiguration)
                .and()
                .authorizeRequests()
                .antMatchers(HttpMethod.DELETE)
                .hasRole("ADMIN")
                .antMatchers("/api/**")
                .hasAnyRole("ADMIN")
                .antMatchers("/user/**")
                .anonymous()
                .anyRequest()
                .authenticated()
                .and()
                .httpBasic()
                .and()
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED);

        return http.build();
    }

    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD")
                .allowCredentials(true);
    }
}

在另一侧，in vue。注：我在allow-origin中添加了 *，只是为了让它工作，我计划稍后使用一个限制性更强的声明。

module.exports = {
    devServer: {
        proxy: {
            '^/api/v1/products/all': {
                target: 'http://localhost:9050/',
                ws: true,
                changeOrigin: true,
                withCredentials: true,
                headers: {
                    Accept: 'application/json',
                    'Access-Control-Allow-Headers': 'Authorization, Cache-Control, Content-Type', // hier hostname:port statt * , Origin, Content-Type, Authorization
                    'Access-Control-Allow-Origin': '*', // hier hostname:port statt *
                    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
                    Authorization: 'Basic admin adminPass'
                },
            },
        }
    }
}

最后是vue中的脚本：

const {data, status} = await axios.get<GetProductPojoResponse>(
        'http://localhost:9050/api/v1/products/all',
        {
          headers: {
            Accept: 'application/json',
            'Access-Control-Allow-Headers': 'Authorization, Cache-Control, Content-Type', // hier hostname:port statt * ', Origin, Content-Type, Authorization'
            'Access-Control-Allow-Origin': '*', // hier hostname:port statt *
            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
            Authorization: 'Basic admin adminPass',
            withCredentials: true,
          },
        },
    );

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

    // ?? "response status is: 200"
    console.log('response status is: ', status);

    return data;

我已经设法得到CORS错误与错误401和403相结合，但我不能解释为什么.....