前端与Java后端交互出现跨域问题的14种解决方案

06-01 1651阅读

跨域问题是前端与后端分离开发中的常见挑战，以下是14种完整的解决方案：

1 前端解决方案( 开发环境代理)

1.1 Webpack开发服务器代理

// vue.config.js 或 webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

1.2 Vite代理配置

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

1.3 JSONP (仅限GET请求)

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callback}`;
  document.body.appendChild(script);
}
// 后端需要返回类似 callbackName(data) 的响应

1.4 WebSocket

const socket = new WebSocket('ws://your-backend-url');

1.5 修改浏览器安全策略 (仅开发环境)

Chrome启动参数：--disable-web-security --user-data-dir=/tmp/chrome

2 后端解决方案

2.1 Spring框架解决方案

2.1.1 使用@CrossOrigin注解

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*") // 允许所有来源
public class MyController {
    // 控制器方法
}

2.1.2 全局CORS配置

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000", "http://example.com")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
    }
}

3.1.2 过滤器方式

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:3000");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new FilterRegistrationBean(new CorsFilter(source));
}

2.2 Spring Boot特定配置

2.2.1 application.properties配置

# 允许的源
cors.allowed-origins=http://localhost:3000,http://example.com
# 允许的方法
cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
# 允许的头部
cors.allowed-headers=*
# 是否允许凭证
cors.allow-credentials=true
# 预检请求缓存时间
cors.max-age=3600

2.3 Spring Security解决方案

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            // 其他安全配置
            .csrf().disable(); // 通常需要禁用CSRF以简化API开发
    }
    
    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE","OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

3 生产环境解决方案

3.1 Nginx反向代理

（图片来源网络，侵删）

server {
    listen 80;
    server_name yourdomain.com;
    
    location /api {
        proxy_pass http://backend-server: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;
    }
    
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

4 高级方案

4.1 基于Token的跨域认证

// 后端添加响应头
response.setHeader("Access-Control-Expose-Headers", "Authorization");
response.setHeader("Authorization", "Bearer " + token);

4.2 预检请求(OPTIONS)处理

@RestController
public class OptionsController {
    @RequestMapping(value = "/**", method = RequestMethod.OPTIONS)
    public ResponseEntity handleOptions() {
        return ResponseEntity.ok().build();
    }
}

4.3 动态允许源

@Bean
public CorsFilter corsFilter() {
    return new CorsFilter(new UrlBasedCorsConfigurationSource() {
        @Override
        public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
            CorsConfiguration config = new CorsConfiguration();
            String origin = request.getHeader("Origin");
            if (allowedOrigins.contains(origin)) { // 检查是否在允许列表中
                config.addAllowedOrigin(origin);
                config.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE","OPTIONS"));
                config.setAllowedHeaders(Arrays.asList("*"));
                config.setAllowCredentials(true);
            }
            return config;
        }
    });
}

选择哪种解决方案取决于具体需求、安全要求和部署环境。生产环境中推荐使用Nginx反向代理或API网关方案，开发环境中可以使用代理或后端CORS配置。