共计 1630 个字符，预计需要花费 5 分钟才能阅读完成。
开发过程中总是会听说到跨域这个问题，一直没有详细的了解过，这里我就详细的梳理一下。
源
源（origin）就是协议、域名和端口号。
同源策略
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以 xyz.com 下的 js 脚本采用 ajax 读取 abc.com 里面的文件数据是会被拒绝的。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
跨域
URL 由协议、域名、端口和路径组成，如果两个 URL 的协议、域名和端口全部相同，则表示他们同源。否则，只要协议、域名、端口有任何一个不同，就是跨域。
跨域分析
在 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. 点击按钮测试
火狐浏览器进行跨域请求拦截
3. 搭建一个 8081 端口的项目
创建一个 /hello 的接口
/**
* 跨域 8080 端口方法
* @author zhouzhaodong
*/
@RestController
public class CrossDomainTwoController {@RequestMapping("/hello")
public String hello(){return "这是一个来自 8081 端口的接口！";}
} 点击后观察浏览器，由于没有进行任何配置，所以依旧报错
4. 解决跨域问题
4.1 使用 @CrossOrigin 注解端口
/**
* 跨域 8080 端口方法
* @author zhouzhaodong
*/
@RestController
public class CrossDomainTwoController {
@CrossOrigin
@RequestMapping("/hello")
public String hello(){return "这是一个来自 8081 端口的接口！";}
} 再次点击按钮，发现正常返回信息。
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);
}
};
}
} 再次点击按钮，发现正常返回信息。
到此为止啦！
源代码地址
https://github.com/zhouzhaodo…
个人网站
http://www.zhouzhaodong.xyz
正文完