springboot+vue项目怎么解决跨域问题详解

1. 前端代理（开发环境推荐）

适用场景：vue 开发环境调试时，避免直接请求后端接口的跨python域问题。

实现步骤：

• 在 Vue 项目的 vue.config.js 中配置代理：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {  // 代理所有以 /api 开头的请求
          target: 'http://localhost:8080', // Spring Boot 后端地址
          changeOrigin: true, // 允许跨域
          pathRewrite: {
            '^/api': '' // 去除请求路径中的 /api 前缀
          }
        }
      }
    }
  }

  2.前端请求时使用 /api 前缀：

  axIOS.get('/api/users').then(response => {
    // 处理响应
  });

  优点：无需修改后端代码，适合开发阶段快速解决跨域。

2. 后端全局配置 CORS（生产环境推荐）

适用场景：生产环境需要后端直接支持跨域。
实现步骤：

• 在 Spring Boot 中创建全局 CORS 配置类：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
  
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/*www.chinasem.cn*") // 所有接口
                  .allowedOrigins("http://localhost:5173") // 允许的前端地址
                  .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                  .allowedHeaders("*") // 允许的请求头
                  .allowCredentials(true) // 允许发送 Cookie
                  .maxAge(3600); // 预检请求缓存时间（秒）
      }
  }

  2.若使用 Spring Security，需额外放行 OPTIONS 请求（预检请求）：

  @Configuration
  @EnableWebSecurity
  public class SecurityConfig {
  
      @Bean
      public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
          http.cors() // 启用 CORS
              .and()
              // 其他安全配置...
              .authorizeRequests()
              .requestMatchers(HttpMethod.OPTIONS).permitAll() // 放行 OPTIONS 请求
              .anyRequest().authenticated();
          return http.build();
      }
  }

3. 后端注解配置（按接口控制）

适用场景：仅特定接口需要跨域支持。

实现步骤：在 Controller 或方法上添加 @CrossOrigin 注解：

@RestController
@CrossOrigin(origins = "http://localhost:5173") // 类级别注解
public class UserController {

    @GetMapping("/users")
    @CrossOrigin(origins = "http://localhost:5173") // 方法级别注解
    public List<User> getUsers() {
        // 业务逻辑
    }
}

4.编程 Nginx 反向代理（生产环境终极方案）

适用场景：前后端部署到同一域名下，彻底避免跨域。

实现步骤：

• 配置 Nginx，将前端请求代理到后端接口：

  server {
      listen 80;
      server_name your-domain.com;
  
      # 前端静态资源
      location / {
          root /path/to/vue/dist;
          index index.html;
          try_files $uri $uri/ /index.html;
      }
  
      # 后端 API 代理
      location /api {
          proxy_pass http://localhost:8080;
          proxy_set_header Hostjavascript $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_China编程header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
  }

  2.重启 Nginx：

  sudo nginx -s reload

总结

推荐组合：

• 开发环境：前端代理（方案1） + 后端全局 CORS（方案2）。

• 生产环境：Nginx 反向代理（方案4） + 后端全局 CORS（方案2，双重保障）。

到此这篇关于springboot+vue项目怎么解决跨域问题的文章就介绍到这了,更多相关springboot+vue解决跨域问题内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！