当前位置：首页 > 后端开发 > 正文

java跨域前端怎么写

admin
后端开发
2025-07-26
6

va后端配合前端实现跨域，前端可通过设置 axios等库的 withCredentials为true，或在请求头添加特定字段；后端用注解@CrossOrigin配置允许来源。

是关于Java跨域前端实现的详细指南,涵盖技术原理、具体步骤及代码示例：

跨域问题的本质与影响范围

浏览器出于安全考虑实施的同源策略（协议+域名+端口号完全一致）会阻止以下行为：

Cookie/LocalStorage等存储机制无法读写非同源数据；
DOM无法获取其他源的页面元素；
AJAX/Fetch等网络请求被直接拦截，典型场景包括前后端分离架构（如Vue+Spring Boot）、多模块部署等情况均会触发该限制。

前端实现方案对比表

方案类型	适用场景	优点	缺点
JSONP	仅支持GET请求	兼容性好（IE低版本可用）	安全性差，不支持POST
CORS	现代主流选择	全方法支持/自定义头部	需后端配合配置
WebSocket	实时双向通信需求	突破同源限制	协议复杂度较高
Iframe代理	嵌入	绕过同源限制	难以获取完整响应对象

CORS标准下的前端实践步骤

基础请求封装（以Fetch API为例）

// 带凭证的跨域请求配置
fetch('http://your-java-backend/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}` // JWT示例
    },
    credentials: 'include', // 关键：允许携带Cookie/认证信息
    body: JSON.stringify({ id: 123 })
})
.then(response => response.json())
.then(data => {
    console.log('接收到的数据:', data);
    document.getElementById('output').innerText = data.result;
})
.catch(error => console.error('跨域错误:', error));

注意：当使用credentials: 'include'时，必须确保后端设置了Access-Control-Allow-Credentials: true，否则请求将被浏览器丢弃。

Axios库增强配置

推荐使用axios进行统一管理：

const instance = axios.create({
    baseURL: 'http://your-java-backend',
    withCredentials: true, // 全局启用凭证携带
    timeout: 5000,
    headers: { 'X-Custom-Header': 'value' }
});
// 拦截器添加通用Token处理
instance.interceptors.request.use(config => {
    const token = localStorage.getItem('jwt_token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
}, error => Promise.reject(error));

响应预处理技巧

对于异常状态码的处理：

java跨域前端怎么写第1张

function handleResponse(response) {
    if (!response.ok) {
        throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json();
}

Java后端配套配置方案

方案A：Spring Boot全局CORS设置（推荐）

在配置类中实现WebMvcConfigurer接口：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/") // 匹配所有路径
                .allowedOrigins("http://frontend-domain.com", "http://localhost:8080") // 精确控制来源
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法类型
                .allowedHeaders("") // 放行所有请求头
                .allowCredentials(true) // 关键：允许携带凭证
                .maxAge(3600); // 缓存时长（秒）
    }
}

优势：集中管理跨域策略，适合大型项目；支持动态路径匹配。

方案B：控制器级精细控制

通过注解快速启用特定接口的跨域能力：

@RestController
@CrossOrigin(origins = "http://specific-frontend.cn", allowCredentials = "true")
public class UserApi {
    @PostMapping("/login")
    public ResponseEntity<Void> authenticate(@RequestBody LoginRequest request) {
        // 认证逻辑...
        return ResponseEntity.ok().build();
    }
}

适用场景：当不同模块需要差异化的跨域策略时使用。

方案C：Servlet过滤器实现（传统方式）

适用于非Spring环境或需要自定义逻辑的场景：

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", ""); // 简单写法，生产环境建议限制具体域名
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        // 预检请求特殊处理
        if (((HttpServletRequest) req).getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }
        chain.doFilter(req, res);
    }
}

注意：此方案无法自动处理复杂场景（如带凭证的请求），建议优先使用框架内置方案。

常见问题排查手册

现象	可能原因	解决方案
预检请求失败	缺少OPTIONS方法支持	确保后端响应包含Access-Control-Allow-Methods
Cookie未传递	allowCredentials未启用	同时设置前端withCredentials和后端allowCredentials
响应头缺失	未配置exposedHeaders	在CorsRegistry中添加.exposedHeaders(“X-Total-Count”)
浏览器控制台报错	跨域策略过于严格	临时测试可尝试星号通配符()，但生产环境必须收敛权限