Detailed explanation of how to solve cross-domain problems in springboot+vue project

1. Front-end agent (development environment recommendation)

Applicable scenarios: When debugging the Vue development environment, avoid cross-domain issues that directly request backend interfaces.

Implementation steps：

• On the Vue projectConfigure the proxy:

   = {
    devServer: {
      proxy: {
        '/api': {  // Proxy all requests starting with /api        target: 'http://localhost:8080', // Spring Boot backend address        changeOrigin: true, // Allow cross-domain        pathRewrite: {
            '^/api': '' // Remove the /api prefix in the request path        }
        }
      }
    }
  }

  2. Used during front-end request/apiPrefix:

  ('/api/users').then(response => {
    // Process the response});

  advantage: No need to modify the backend code, suitable for rapid cross-domain resolution in the development stage.

2. Backend global configuration CORS (production environment recommendation)

Applicable scenarios: The production environment requires the backend to directly support cross-domain.
Implementation steps：

• Create a global CORS configuration class in Spring Boot:

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
  
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          ("/**") // All interfaces                .allowedOrigins("http://localhost:5173") // Allowed front-end address                .allowedMethods("GET", "POST", "PUT", "DELETE") // Allowed request method                .allowedHeaders("*") // Allowed request header                .allowCredentials(true) // Allow cookies to be sent                .maxAge(3600); // Preflight request cache time (seconds)    }
  }

  2. If using Spring Security, additional OPTIONS request (pre-check request):

  @Configuration
  @EnableWebSecurity
  public class SecurityConfig {
  
      @Bean
      public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
          () // Enable CORS            .and()
              // Other security configurations...            .authorizeRequests()
              .requestMatchers().permitAll() // Release OPTIONS request            .anyRequest().authenticated();
          return ();
      }
  }

3. Backend annotation configuration (controlled by interface)

Applicable scenarios: Only specific interfaces require cross-domain support.

Implementation steps: Add on the Controller or method@CrossOriginNote:

@RestController
@CrossOrigin(origins = "http://localhost:5173") // Class level annotationpublic class UserController {

    @GetMapping("/users")
    @CrossOrigin(origins = "http://localhost:5173") // Method level annotation    public List<User> getUsers() {
        // Business logic    }
}

4. Nginx reverse proxy (the ultimate solution for production environment)

Applicable scenarios: Deploy the front and back ends under the same domain name to completely avoid cross-domain.

Implementation steps：

• Configure Nginx to proxy the front-end request to the back-end interface:

  server {
      listen 80;
      server_name ;
  
      # Front-end static resources    location / {
          root /path/to/vue/dist;
          index ;
          try_files $uri $uri/ /;
      }
  
      # Backend API Proxy    location /api {
          proxy_pass http://localhost:8080;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
  }

  2. Restart Nginx:

  sudo nginx -s reload

Summarize

Recommended combination：

• Development Environment: Front-end Agent (Scheme 1) + Back-end Global CORS (Scheme 2).

• Production environment: Nginx reverse proxy (Scheme 4) + backend global CORS (Scheme 2, dual guarantee).

This is the article about how to solve cross-domain problems in springboot+vue project. For more related content on springboot+vue to solve cross-domain problems, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!