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

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

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

实现步骤：

• 在 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("/**") // 所有接口
                  .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 Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_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解决跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论