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

无界猴

25天前更新

042756

跨域问题是前后端分离开发中的常见挑战，以下是针对Java后端与前端交互的14种专业解决方案，按照实现方式和适用场景分类：

一、服务端解决方案

1. Spring Boot CORS配置

// 全局配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

// 或注解方式
@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/api")
public class MyController { ... }

2. 过滤器方案

@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        chain.doFilter(req, res);
    }
}

3. 网关层配置（Nginx）

location /api {
    add_header 'Access-Control-Allow-Origin' '$http_origin';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,Content-Type';
    add_header 'Access-Control-Allow-Credentials' 'true';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    proxy_pass http://backend;
}

4. Spring Security配置

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().configurationSource(request -> {
            CorsConfiguration config = new CorsConfiguration();
            config.addAllowedOrigin("*");
            config.addAllowedMethod("*");
            config.addAllowedHeader("*");
            return config;
        });
    }
}

二、代理解决方案

5. 开发环境代理（Vue/React）

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

6. 生产环境反向代理

Nginx配置：

server {
    listen 80;
    server_name yourdomain.com;
    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
    }
}

三、前端解决方案

7. JSONP（仅限GET请求）

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.appendChild(script);
}

// Java端需返回类似 callbackName(data) 格式

8. 前端库封装

// axios配置
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
    config.headers['X-Requested-With'] = 'XMLHttpRequest';
    return config;
});

四、协议层解决方案

9. HTTPS强制同源

将前后端统一部署在HTTPS协议下
配置HSTS响应头：

response.setHeader("Strict-Transport-Security", "max-age=63072000; includeSubDomains");

10. WebSocket协议

@ServerEndpoint("/ws")
@Configuration
public class WebSocketEndpoint {
    @OnOpen
    public void onOpen(Session session) {
        // 建立连接
    }
}

五、高级解决方案

11. 预检请求缓存

response.setHeader("Access-Control-Max-Age", "1800"); // 30分钟缓存

12. 带凭证的请求

response.setHeader("Access-Control-Allow-Credentials", "true");
// 前端需设置 withCredentials: true

13. 自定义Header处理

// 允许自定义Header
response.setHeader("Access-Control-Expose-Headers", "Custom-Header");
response.setHeader("Custom-Header", "value");

14. 基于Spring Cloud Gateway的全局配置

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"
            allowedMethods:
              - GET
              - POST
            allowedHeaders: "*"

解决方案选择矩阵

方案	适用场景	优势	限制
Spring CORS	常规REST API	配置简单	需Spring环境
Nginx代理	生产环境部署	性能好，前后端解耦	需运维知识
开发环境代理	前端开发阶段	无代码侵入	仅限开发环境
JSONP	老旧浏览器兼容	支持IE8	仅GET请求
WebSocket	实时通信场景	双向通信	协议升级成本
网关层配置	微服务架构	统一管理	增加架构复杂度