什么是跨域问题？如何解决？

最新推荐文章于 2025-09-11 18:10:42 发布

原创

最新推荐文章于 2025-09-11 18:10:42 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring

跨域问题是浏览器的保护机制，限制了不同站点间的 AJAX 调用。本文通过实例演示了 Spring Boot 中的五种跨域解决方案：@CrossOrigin 注解、配置文件设置、CorsFilter、Response 对象以及 ResponseBodyAdvice。这些方法主要通过设置响应头的 Access-Control-Allow-Origin 参数来实现跨域访问。

跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。但这个保护机制也带来了新的问题，它的问题是给不同站点之间的正常调用，也带来的阻碍，那怎么解决这个问题呢？接下来我们一起来看。

1.跨域三种情况
在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求：

协议不同，如 http 和 https；
域名不同；
端口不同。
也就是说，即使域名相同，如果一个使用的是 http，另一个使用的是 https，那么它们也属于跨域访问。常见的跨域问题如下图所示：
在这里插入图片描述
2.跨域问题演示
接下来，我们使用两个 Spring Boot 项目来演示跨域的问题，其中一个是端口号为 8080 的前端项目，另一个端口号为 9090 的后端接口项目。

2.1 前端网站
前端项目只需要在 resources 下放两个文件，一个用于发送 ajax 请求的 jquery.js，另一个是 html 前端页面，工程目录如下图所示：图片其中前端页面 index.html 的代码如下：

跨域测试页面 2.2 后端接口后端接口项目首先先在 application.properties 配置文件中，设置项目的端口号为 9090，如下所示：

server.port=9090
然后创建一个后端控制器，返回一个 JSON 格式的数据，实现代码如下：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;

@RestController
public class TestController {
@RequestMapping(“/test”)
public HashMap<String, Object> test() {
return new HashMap<String, Object>() { {
put(“state”, 200);
put(“data”, “success”);
put(“msg”, “”);
}};
}
}
以上两个项目创建并启动成功之后，使用前端项目访问后端接口，因为端口不一样，所以也属于跨域访问，运行结果如下图所示：图片

3.解决跨域问题
在 Spring Boot 中跨域问题有很多种解决方案，比如以下 5 个：

使用 @CrossOrigin 注解实现跨域