1. Background: in the project development, the front and back end separation mode is adopted, in which Vue + Axios is used for the front end and spring-boot is used for the back end. After the project is developed, you want to go online, so the front end chooses to deploy to Nginx, and the whole project is packaged in docker with docker-compose to run.
2. Problem: after the front end is deployed to Nginx (using the default configuration of Nginx without modification), a cross-domain error occurs when using Axios to access the back end. Therefore, according to the online statement, add a cross-domain configuration in the spring-boot background:

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOriginPattern("*"); 
        corsConfiguration.addAllowedHeader("*"); 
        corsConfiguration.addAllowedMethod("*"); 
        corsConfiguration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

3. Result: after restarting the project, the operation still reported a cross-domain error and the interface could not be accessed. Then the attempt to add the cross-origin annotation was invalid. What is the reason? Is it the problem of Nginx, or does it mean that the front and back end needs to be configured across domains to succeed? I have no front-end experience