基于SpringBoot解决CORS跨域的问题(@CrossOrigin)

- 日理万妓 2022-10-25 05:45 147阅读 0赞

一、关于跨域介绍  
在前后分离的架构下，跨域问题难免会遇见比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。

网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。

例如，XMLHttpRequest和Fetch API遵循同源策略。

这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

跨域的体现，在于它的域名不同或者端口不同，但要注意以下的形式为非跨域模式

http://www.example.com/index.html ==> http://www.example.com/login.html

二、Spring Boot跨域(@CrossOrigin)  
当然这里虽然指SpringBoot但是SpringMVC也是一样的，要求在Spring4.2及以上的版本

1、@CrossOrigin使用场景要求  
jdk1.8+

Spring4.2+

2、@CrossOrigin源码解析(翻译参考网络，文末列出参考地址)  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
@Target(\{ ElementType.METHOD, ElementType.TYPE \})  
@Retention(RetentionPolicy.RUNTIME)  
@Documented  
public @interface CrossOrigin \{  
String\[\] DEFAULT\_ORIGINS = \{ "\*" \};  
String\[\] DEFAULT\_ALLOWED\_HEADERS = \{ "\*" \};  
boolean DEFAULT\_ALLOW\_CREDENTIALS = true;  
long DEFAULT\_MAX\_AGE = 1800;  
/\*\*  
\* 同origins属性一样  
\*/  
@AliasFor("origins")  
String\[\] value() default \{\};  
/\*\*  
\* 所有支持域的集合，例如"http://domain1.com"。  
\* <p>这些值都显示在请求头中的Access-Control-Allow-Origin  
\* "\*"代表所有域的请求都支持  
\* <p>如果没有定义，所有请求的域都支持  
\* @see \#value  
\*/  
@AliasFor("value")  
String\[\] origins() default \{\};  
/\*\*  
\* 允许请求头重的header，默认都支持  
\*/  
String\[\] allowedHeaders() default \{\};  
/\*\*  
\* 响应头中允许访问的header，默认为空  
\*/  
String\[\] exposedHeaders() default \{\};  
/\*\*  
\* 请求支持的方法，例如"\{RequestMethod.GET, RequestMethod.POST\}"\}。  
\* 默认支持RequestMapping中设置的方法  
\*/  
RequestMethod\[\] methods() default \{\};  
/\*\*  
\* 是否允许cookie随请求发送，使用时必须指定具体的域  
\*/  
String allowCredentials() default "";  
/\*\*  
\* 预请求的结果的有效期，默认30分钟  
\*/  
long maxAge() default -1;  
\}  
3、@CrossOrigin使用  
Spring Boot下的请求处理控制器

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
package com.example.demo.controller;  
import com.example.demo.domain.User;  
import com.example.demo.service.IUserFind;  
import org.springframework.web.bind.annotation.CrossOrigin;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RequestParam;  
import org.springframework.web.bind.annotation.RestController;  
import javax.annotation.Resource;  
/\*\*  
\* @Title: UserController  
\* @ProjectName demo  
\* @Description: 请求处理控制器  
\* @author 浅然  
\* @date 2018/7/2022:18  
\*\*/  
@RestController  
//实现跨域注解  
//origin="\*"代表所有域名都可访问  
//maxAge飞行前响应的缓存持续时间的最大年龄，简单来说就是Cookie的有效期 单位为秒  
//若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失  
@CrossOrigin(origins = "\*",maxAge = 3600)  
public class UserController \{  
@Resource  
private IUserFind userFind;  
@GetMapping("finduser")  
public User finduser(@RequestParam(value="id") Integer id)\{  
//此处省略相应代码  
\}  
\}  
后台返回的数据

前端跨域请求

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>demo</title>  
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>  
</head>  
<body>  
<input type="button" value="测试" οnclick="ajaxloding()" />  
<div id="usermessage"></div>  
<script>  
var getdata=0;  
function ajaxloding()\{  
$.ajax(\{  
async:false,  
type:"get",  
url:"http://localhost:8080/api/finduser?id=1",  
contentType: "application/x-www-form-urlencoded",  
dataType: "json",  
data: \{\},  
success:function(result)\{  
getdata=result.name  
\},  
error: function (errorMsg) \{  
//请求失败时执行该函数  
alert("请求数据失败!");  
\}  
\});  
$("\#usermessage").text(getdata)  
\}  
</script>  
</body>  
</html>