Springboot如何解决跨域问题？

不如打代码KK2026-01-07 11:46

Springboot如何解决跨域问题？

Springboot如何解决跨域问题？

在前后端分离架构中，跨域问题是Java开发者绕不开的"基础门槛"。本文从跨域的本质（同源策略）出发，系统讲解SpringBoot中5种主流跨域方案 ，每个方案包含原理解析+可运行代码+适用场景，帮你彻底解决跨域问题。

一、先搞懂：为什么会有跨域？

跨域的根源是浏览器的同源策略（Same-Origin Policy）------这是浏览器的安全机制，要求请求的"源"必须与当前页面的"源"完全一致，才允许交互。也就是说在两个后端之间互相调用接口是没有跨域问题的。

1.1 同源的定义

"源"由三部分组成，三者完全相同才叫"同源"：

  • 协议（如http/https）
  • 域名（如localhost/www.xxx.com）
  • 端口（如8080/8090）

示例 ：当前页面是http://localhost:8080，以下请求会被判定为跨域：

  • https://localhost:8080（协议不同）
  • http://127.0.0.1:8080（域名不同）
  • http://localhost:8090（端口不同）

1.2 跨域的表现

浏览器会拦截跨域请求，控制台抛出类似错误：

复制代码 
Access to XMLHttpRequest at 'http://localhost:8081/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

二、方案1：JSONP（基本不用）

JSONP是早期跨域方案，前端后端需要同时更改，需要增加一个callback请求参数，当然这个callback参数也可以自定义。

2.1 原理

  1. 前端通过<script>标签请求后端接口，传递回调函数名（如callback=handleData）；
  2. 后端将数据包裹在回调函数中返回（如handleData({"msg":"success"})）；
  3. 前端提前定义回调函数，接收并处理数据。

2.2 实战代码

后端接口
java 复制代码 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JsonpController {
    /**
     * JSONP接口：接收前端传递的callback参数，返回包裹后的JSON
     */
    @GetMapping("/info")
    public String jsonpInfo(@RequestParam String callback) {
        // 模拟返回的数据（比如根据id=16查询到的信息）
        String data = "{\"code\":200,\"msg\":\"success\",\"data\":{\"id\":16,\"name\":\"测试数据\",\"desc\":\"JSONP跨域示例\"}}";
        // 拼接JSONP格式的响应（回调函数名 + 数据）
        return callback + "(" + data + ")";
    }
}
前端测试
html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax JSONP跨域示例</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button id="submitBtn">发起JSONP请求</button>

<script>
    $("#submitBtn").click(function () {
        $.ajax({
            url: 'http://localhost:8080/info?id=16', // 后端接口地址（带参数id=16）
            type: 'GET', // JSONP仅支持GET请求
            dataType: 'jsonp', // 关键：指定数据类型为jsonp
            jsonp: 'callback', // 告诉后端：前端用callback参数传递回调函数名（默认就是callback，可省略）
            success: function (response) {
                // 成功接收后端返回的数据
                console.log("JSONP请求成功，返回数据：", response);
                alert("请求成功！数据ID：" + response.data.id + "，名称：" + response.data.name);
            },
            error: function (err) {
                console.error("JSONP请求失败：", err);
                alert("请求失败，请检查控制台");
            }
        });
    });
</script>
</body>
</html>

2.3 适用场景

仅适用于简单GET请求，或需要兼容老旧浏览器（如IE）的场景，不推荐现代项目使用。

三、方案2：全局配置（WebMvcConfigurer）

这是SpringBoot中最常用、最优雅的跨域方案，通过配置全局CORS规则实现。

3.1 原理

基于W3C的CORS标准，服务端通过响应头告知浏览器"允许哪些源的请求"，核心响应头包括：

  • Access-Control-Allow-Origin：允许的跨域源；
  • Access-Control-Allow-Methods：允许的请求方法；
  • Access-Control-Allow-Credentials：是否允许携带Cookie。

3.2 实战代码

全局配置类
java 复制代码 
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 匹配所有接口
                .allowedOriginPatterns("*") // 允许所有源（生产环境建议指定域名）
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许所有请求头
                .allowCredentials(true) // 允许携带Cookie
                .maxAge(3600); // 预检请求缓存1小时
    }
}
测试接口
java 复制代码 
@RestController
public class TestController {
    @GetMapping("/api/test/get")
    public String testGet() {
        return "GET跨域成功";
    }

    @PostMapping("/api/test/post")
    public String testPost(@RequestBody String data) {
        return "POST跨域成功，接收：" + data;
    }
}
前端测试（Axios）
html 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button onclick="axios.get('http://localhost:8080/api/test/get').then(res=>alert(res.data))">测试GET</button>
<button onclick="axios.post('http://localhost:8080/api/test/post', {name:'张三'}).then(res=>alert(res.data))">测试POST</button>

3.3 适用场景

前后端分离的现代项目，推荐作为默认方案使用。

四、方案3：CorsFilter（官方Filter方案）

通过Spring官方的CorsFilter实现跨域，比手动写Filter更规范、更灵活。

4.1 原理

CorsFilter是Spring封装的CORS过滤器，通过CorsConfiguration配置规则，再绑定到指定路径，自动拦截请求并添加跨域响应头。

4.2 实战代码

配置类
java 复制代码 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Collections;

@Configuration
public class CorsFilterConfig {
    @Bean
    public CorsFilter corsFilter() {
        // 1. 配置跨域规则
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOriginPatterns(Collections.singletonList("*"));
        config.addAllowedHeader(CorsConfiguration.ALL);
        config.addAllowedMethod(CorsConfiguration.ALL);
        config.setAllowCredentials(true);
        config.setMaxAge(3600L);

        // 2. 绑定路径
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config); // 所有路径应用规则

        // 3. 返回CorsFilter
        return new CorsFilter(source);
    }
}

4.3 适用场景

需要更灵活的跨域逻辑（如动态调整跨域规则），或项目中已使用Filter链的场景。

五、方案4：局部配置（@CrossOrigin注解）

仅为个别接口/Controller配置跨域，优先级高于全局配置。

5.1 原理

@CrossOrigin是Spring提供的注解，底层基于CORS机制，为标注的接口自动添加跨域响应头。

5.2 实战代码

单个接口配置
java 复制代码 
@RestController
public class CrossOriginController {
    @CrossOrigin(origins = "*", maxAge = 3600)
    @GetMapping("/api/cross/test")
    public String crossTest() {
        return "单个接口跨域成功";
    }
}
Controller级配置
java 复制代码 
@CrossOrigin(origins = "http://localhost:8080") // 仅允许8080源
@RestController
public class CrossOriginController2 {
    @GetMapping("/api/cross/test2")
    public String crossTest2() {
        return "Controller级跨域成功";
    }
}

5.3 适用场景

个别接口需要单独配置跨域的场景，不推荐全局使用。

六、方案对比与选型建议

方案 适用场景 优点 缺点
JSONP 简单GET请求、兼容老旧浏览器 实现简单 仅支持GET、有安全风险
WebMvcConfigurer 前后端分离全局跨域 优雅简洁、易维护 灵活性稍弱
CorsFilter 复杂跨域规则、Filter链场景 灵活可控、官方规范 代码量略多
@CrossOrigin 个别接口/Controller跨域 局部配置、无需全局修改 不适合全局场景
相关推荐
豆沙沙包?1 天前
2026年--Lc330-394. 字符串解码(栈）--java版
java·开发语言
蓝程序1 天前
Spring AI学习 程序接入大模型
java·人工智能·spring
nice_lcj5201 天前
数据结构之树与二叉树：重点梳理与拓展
java·数据结构
毕设源码-钟学长1 天前
【开题答辩全过程】以 助学贷款管理系统为例，包含答辩的问题和答案
java
亓才孓1 天前
任意大小的整数和任意精度的小数的API方法
java
Java 码农1 天前
gitlab gitrunner springboot 多环境多分支部署 （非容器方式，使用原生linux 环境）
linux·spring boot·gitlab
2501_941875281 天前
从资源隔离到多租户安全的互联网工程语法构建与多语言实践分享
java·开发语言
xiaolyuh1231 天前
ThreadLocalMap 中弱引用被 GC 后的行为机制解析
java·jvm·redis
不知疲倦的仄仄1 天前
第一天：从 ByteBuffer 内存模型到网络粘包处理实战
java·网络·nio
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Labelme从安装到标注：零基础完整指南04Linux下V2Ray安装配置指南05手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！06GitLab 零基础入门指南：从安装到项目管理全流程07jdk21下载、安装（Windows、Linux、macOS）08【踩坑笔记】50系显卡适配的 PyTorch 安装09UV安装并设置国内源102025-04-03 Latex学习1——本地配置Latex + VScode环境