SpringBoot 解决跨域问题的 5 种方案！

最新推荐文章于 2025-03-10 17:46:50 发布

肥肥技术宅

最新推荐文章于 2025-03-10 17:46:50 发布

阅读量3.7w

点赞数 68

分类专栏： java 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_71777195/article/details/126830773

版权

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

跨域三种情况

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

协议不同，如 http 和 https；
域名不同；
端口不同。

也就是说，即使域名相同，如果一个使用的是 http，另一个使用的是 https，那么它们也属于跨域访问。常见的跨域问题如下图所示：

跨域问题演示

接下来，我们使用两个 Spring Boot 项目来演示跨域的问题，其中一个是端口号为 8080 的前端项目，另一个端口号为 9090 的后端接口项目。

前端网站

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

其中前端页面 index.html 的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域测试页面</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<h1>跨域测试</h1>
<div>
    <input type="button" onclick="mySubmit()" value=" 发送跨域请求 ">
</div>
<script>
    function mySubmit() {
        // 发送跨域请求
        jQuery.ajax({
            url: "http://localhost:9090/test",
            type: "POST",
            data: {"name": "Java"},
            success: function (result) {
                alert("返回数据：" + result.data);
            }
        });