个人学习系列 - SpringBoot解决跨域问题

最新推荐文章于 2024-08-14 08:15:00 发布

周兆东

最新推荐文章于 2024-08-14 08:15:00 发布

阅读量1.2k

点赞数 10

分类专栏：个人学习系列文章标签： java

本文链接：https://blog.csdn.net/xiuaiba/article/details/106400009

版权

个人学习系列专栏收录该内容

42 篇文章 0 订阅

订阅专栏

开发过程中总是会听说到跨域这个问题，一直没有详细的了解过，这里我就详细的梳理一下。

源

源（origin）就是协议、域名和端口号。

同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

跨域

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口全部相同，则表示他们同源。否则，只要协议、域名、端口有任何一个不同，就是跨域。

跨域分析

图片.png

在Spring Boot上解决跨域问题

1. 搭建一个8080端口的项目

前端页面使其访问8081端口的接口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试-8080端口</title>
</head>
<body>
    <button id="test">8080 -> 8081</button>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function () {
        $.ajax({
            url: "http://localhost:8081/hello",
            type: "post",
            success:function (res) {
                alert(res)
            }
        })
    });
</script>
</html>

2. 点击按钮测试

火狐浏览器进行跨域请求拦截
图片.png

3. 搭建一个8081端口的项目

创建一个/hello的接口

/**
 * 跨域8080端口方法
 * @author zhouzhaodong
 */
@RestController
public class CrossDomainTwoController {

    @RequestMapping("/hello")
    public String hello(){
        return "这是一个来自8081端口的接口！";
    }

}

点击后观察浏览器，由于没有进行任何配置，所以依旧报错
图片.png

4. 解决跨域问题

4.1 使用@CrossOrigin注解端口

/**
 * 跨域8080端口方法
 * @author zhouzhaodong
 */
@RestController
public class CrossDomainTwoController {

    @CrossOrigin
    @RequestMapping("/hello")
    public String hello(){
        return "这是一个来自8081端口的接口！";
    }

}

再次点击按钮，发现正常返回信息。
图片.png

4.2 使用WebMvcConfigurer对象来定义全局CORS配置

注释掉@CrossOrigin注释

/**
 * 定义全局CORS配置
 * @author zhouzhaodong
 */
@Configuration
public class MyConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/*")
                        .allowedOrigins("*")
                        .allowCredentials(true)
                        .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
                        .maxAge(3600);
            }
        };
    }
}