SpringBoot使用CROS解决跨域问题

布满荆棘的人生 2022-05-20 01:04 241阅读 0赞

#  #

> 跨域问题其实之前就有说过，不明白的可以参考我之前的文章，这章主要讲解SpringBoot CROS的支持。

这里主要按照官方文档方式讲述。

SpringBoot CROS 参考： [http://docs.spring.io/spring-boot/docs/1.5.4.RELEASE/reference/htmlsingle/\#boot-features-cors][http_docs.spring.io_spring-boot_docs_1.5.4.RELEASE_reference_htmlsingle_boot-features-cors]

Spring CROS 参考： [http://docs.spring.io/spring/docs/4.3.9.RELEASE/spring-framework-reference/htmlsingle/\#cors][http_docs.spring.io_spring_docs_4.3.9.RELEASE_spring-framework-reference_htmlsingle_cors]

### 一、代码准备 ###

![这里写图片描述][SouthEast]

首先是支持Restful的controller，这里就不使用数据库了，简单一点。 UserController.class

1.  package cn.saytime.web;
2.  
3.  import cn.saytime.bean.JsonResult;
4.  import cn.saytime.bean.User;
5.  import org.springframework.http.ResponseEntity;
6.  import org.springframework.web.bind. annotation.CrossOrigin;
7.  import org.springframework.web.bind. annotation.PathVariable;
8.  import org.springframework.web.bind. annotation.RequestBody;
9.  import org.springframework.web.bind. annotation.RequestMapping;
10. import org.springframework.web.bind. annotation.RequestMethod;
11. import org.springframework.web.bind. annotation.RestController;
12. 
13. import java.util.ArrayList;
14. import java.util.Collections;
15. import java.util.Date;
16. import java.util.HashMap;
17. import java.util.List;
18. import java.util.Map;
19. 
20. */\*\**
21.  *\**  *@author*  *zh*
22.  *\**  *@ClassName*  *cn.saytime.web.UserController*
23.  *\**  *@Description* 
24. \*/
25. @RestController
26. public classUserController\{
27. 
28. *// 创建线程安全的Map*
29. static Map<Integer, User> users = Collections.synchronizedMap( new HashMap<Integer, User>());
30. 
31. */\*\**
32.  *\* 根据ID查询用户*
33.  *\**  *@param*  *id*
34.  *\**  *@return* 
35. \*/
36. @RequestMapping (value =  "user/\{id\}" , method = RequestMethod.GET)
37. public ResponseEntity<JsonResult> getUserById ( @PathVariable (value =  "id" ) Integer id)\{
38. JsonResult r = new JsonResult();
39. try \{
40. User user = users. get(id);
41. r.setResult(user);
42. r.setStatus( "ok");
43. \} catch (Exception e) \{
44. r.setResult(e.getClass().getName() + ":" \+ e.getMessage());
45. r.setStatus( "error");
46. e.printStackTrace();
47. \}
48. return ResponseEntity.ok(r);
49. \}
50. 
51. */\*\**
52.  *\* 查询用户列表*
53.  *\**  *@return* 
54. \*/
55. @CrossOrigin
56. @RequestMapping (value =  "users" , method = RequestMethod.GET)
57. public ResponseEntity<JsonResult> getUserList ()\{
58. JsonResult r = new JsonResult();
59. try \{
60. List<User> userList = new ArrayList<User>(users.values());
61. r.setResult(userList);
62. r.setStatus( "ok");
63. \} catch (Exception e) \{
64. r.setResult(e.getClass().getName() + ":" \+ e.getMessage());
65. r.setStatus( "error");
66. e.printStackTrace();
67. \}
68. return ResponseEntity.ok(r);
69. \}
70. 
71. */\*\**
72.  *\* 添加用户*
73.  *\**  *@param*  *user*
74.  *\**  *@return* 
75. \*/
76. @RequestMapping (value =  "user" , method = RequestMethod.POST)
77. public ResponseEntity<JsonResult> add ( @RequestBody User user)\{
78. JsonResult r = new JsonResult();
79. try \{
80. users.put(user.getId(), user);
81. r.setResult(user.getId());
82. r.setStatus( "ok");
83. \} catch (Exception e) \{
84. r.setResult(e.getClass().getName() + ":" \+ e.getMessage());
85. r.setStatus( "error");
86. 
87. e.printStackTrace();
88. \}
89. return ResponseEntity.ok(r);
90. \}
91. 
92. */\*\**
93.  *\* 根据id删除用户*
94.  *\**  *@param*  *id*
95.  *\**  *@return* 
96. \*/
97. @RequestMapping (value =  "user/\{id\}" , method = RequestMethod.DELETE)
98. public ResponseEntity<JsonResult> delete ( @PathVariable (value =  "id" ) Integer id)\{
99. JsonResult r = new JsonResult();
100. try \{
101. users.remove(id);
102. r.setResult(id);
103. r.setStatus( "ok");
104. \} catch (Exception e) \{
105. r.setResult(e.getClass().getName() + ":" \+ e.getMessage());
106. r.setStatus( "error");
107. 
108. e.printStackTrace();
109. \}
110. return ResponseEntity.ok(r);
111. \}
112. 
113. */\*\**
114.  *\* 根据id修改用户信息*
115.  *\**  *@param*  *user*
116.  *\**  *@return* 
117. \*/
118. @RequestMapping (value =  "user/\{id\}" , method = RequestMethod.PUT)
119. public ResponseEntity<JsonResult> update ( @PathVariable ( "id" ) Integer id, @RequestBody User user)\{
120. JsonResult r = new JsonResult();
121. try \{
122. User u = users. get(id);
123. u.setUsername(user.getUsername());
124. u.setAge(user.getAge());
125. users.put(id, u);
126. r.setResult(u);
127. r.setStatus( "ok");
128. \} catch (Exception e) \{
129. r.setResult(e.getClass().getName() + ":" \+ e.getMessage());
130. r.setStatus( "error");
131. 
132. e.printStackTrace();
133. \}
134. return ResponseEntity.ok(r);
135. \}
136. 
137. \}

User.class

1.  package cn.saytime.bean;
2.  
3.  import java.util.Date;
4.  
5.  */\*\**
6.   *\**  *@author*  *zh*
7.   *\**  *@ClassName*  *cn.saytime.bean.User*
8.   *\**  *@Description* 
9.  \*/
10. public classUser\{ 
11. 
12. private int id;
13. private String username;
14. private int age;
15. private Date ctm;
16. 
17. *// Getter Setter*
18. \}

JsonResult.class

1.  package cn.saytime.bean;
2.  
3.  public class JsonResult \{
4.  
5.  private String status = null;
6.  
7.  private Object result = null;
8.  
9.  *//*  *Getter*  *Setter*
10. \}

### 二、测试是否存在跨域问题 ###

我们在static目录新建一个test.html

1.  <!DOCTYPE html>
2.  <htmllang="en">
3.  <head>
4.  <metacharset="UTF-8">
5.  <title>Title </title>
6.  <scriptsrc="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js">  </script>
7.  <scripttype="text/javascript"> 
8.  functioncrosRequest() \{ 
9.  $.ajax(\{
10. url: 'http://localhost:8080/users' ,
11. type: 'get' ,
12. dataType: 'json' ,
13. success: function(data) \{ 
14. console .log(data);
15. \}
16. \});
17. \}
18. </script>
19. </head>
20. <body>
21. <buttononclick="crosRequest()">请求跨域资源 </button>
22. </body>
23. </html>

1.  我们使用IDEA的浏览器预览功能，点击谷歌小图标，可以看到打开网址为： [http://localhost:63342/springboot-demo/springboot-cros/static/test.html?\_ijt=ibtt432ffb9rh0vffqkkug3je8][http_localhost_63342_springboot-demo_springboot-cros_static_test.html_ijt_ibtt432ffb9rh0vffqkkug3je8]
2.  启动SpringBoot工程，默认8080

> 不是使用IDEA的用户，自己找个tomcat启动test.html页面，修改端口为其他，然后启动springboot。

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

所以证明存在跨域问题。

### 一、@CrossOrigin注解方式 Controller method CORS configuration ###

这里我们在users映射的方法getUserList上面加上@CrossOrigin

1.  @CrossOrigin
2.  @RequestMapping (value =  "users" , method = RequestMethod.GET)
3.  public ResponseEntity<JsonResult> getUserList ()

然后再次使用上面的方式访问。

![这里写图片描述][SouthEast 3]

> 表示跨域问题解决。 default @CrossOrigin allows all origins and the HTTP methods specified in the @RequestMapping annotation 上面的官方文档说明，也就是默认的@CrossOrigin允许所有跨域请求。

通过查看CrossOrigin源码可以看到， 默认配置为：

1.  "Access-Control-Allow-Origin" : "\*"
2.  "Access-Control-Allow-Methods" : "GET,POST,PUT,OPTIONS"
3.  "Access-Control-Allow-Credentials" : "true"

1.  @Target(\{ElementType.METHOD, ElementType.TYPE\})
2.  @Retention(RetentionPolicy.RUNTIME)
3.  @Documented
4.  public @interface CrossOrigin \{
5.  */\*\* @deprecated \*/*
6.  @Deprecated
7.  String\[\] DEFAULT\_ORIGINS = new String\[\]\{ "\*"\};
8.  */\*\* @deprecated \*/*
9.  @Deprecated
10. String\[\] DEFAULT\_ALLOWED\_HEADERS = new String\[\]\{ "\*"\};
11. */\*\* @deprecated \*/*
12. @Deprecated
13. boolean DEFAULT\_ALLOW\_CREDENTIALS = true;
14. */\*\* @deprecated \*/*
15. @Deprecated
16. long DEFAULT\_MAX\_AGE = 1800 L;
17. 
18. @AliasFor( "origins")
19. String\[\] value() default \{\};
20. 
21. @AliasFor( "value")
22. String\[\] origins() default \{\};
23. 
24. String\[\] allowedHeaders() default \{\};
25. 
26. String\[\] exposedHeaders() default \{\};
27. 
28. RequestMethod\[\] methods() default \{\};
29. 
30. String allowCredentials() default  "";
31. 
32. long maxAge() default  \- 1 L;
33. \}

--------------------

> It is also possible to enable CORS for the whole controller 也可以用在整个Controller类上面。即该controller所有映射都支持跨域请求。

1.  @CrossOrigin( origins = "http://domain2.com",
2.  maxAge = 3600,
3.  methods = \{ RequestMethod .GET, RequestMethod .POST\})
4.  @RestController
5.  public class UserController

### 二、全局CORS配置 ###

> Global CORS configuration In addition to fine-grained, annotation-based configuration you’ll probably want to define some global CORS configuration as well. This is similar to using filters but can be declared withing Spring MVC and combined with fine-grained @CrossOrigin configuration. By default all origins and GET, HEAD and POST methods are allowed.

1.  package cn.saytime.config;
2.  
3.  import org.springframework.context. annotation.Bean;
4.  import org.springframework.context. annotation.Configuration;
5.  import org.springframework.web.servlet.config. annotation.CorsRegistry;
6.  import org.springframework.web.servlet.config. annotation.WebMvcConfigurer;
7.  import org.springframework.web.servlet.config. annotation.WebMvcConfigurerAdapter;
8.  
9.  */\*\**
10.  *\* @author zh*
11.  *\* @ClassName cn.saytime.config.CORSConfiguration*
12.  *\* @Description*
13.  *\*/*
14. @Configuration
15. public class CORSConfiguration\{
16. 
17. @Bean
18. public WebMvcConfigurer corsConfigurer() \{
19. return new WebMvcConfigurerAdapter() \{
20. @Override
21. public void addCorsMappings(CorsRegistry registry) \{
22. *// registry.addMapping(* *"/api/\*\*"* *);*
23. registry.addMapping( "/\*\*")
24. .allowedOrigins( "http://domain.com", "http://domain2.com")
25. .allowedMethods( "GET", "POST", "DELETE", "PUT", "OPTIONS")
26. .allowCredentials( false).maxAge( 3600);
27. \}
28. \};
29. \}
30. \}

### 三、过滤器实现跨域 Filter based CORS support ###

1.  @Configuration
2.  public classMyConfiguration\{
3.  
4.  @Bean
5.  public FilterRegistrationBean corsFilter()\{
6.  UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
7.  CorsConfiguration config = new CorsConfiguration();
8.  config.setAllowCredentials( false);
9.  config.addAllowedOrigin( "http://domain.com");
10. config.addAllowedHeader( "\*");
11. config.addAllowedMethod( "\*");
12. source.registerCorsConfiguration( "/\*\*", config);
13. FilterRegistrationBean bean = new FilterRegistrationBean( new CorsFilter(source));
14. bean.setOrder( 0);
15. return bean;
16. \}
17. \}

原文：https://blog.csdn.net/saytime/article/details/74937204

[http_docs.spring.io_spring-boot_docs_1.5.4.RELEASE_reference_htmlsingle_boot-features-cors]: http://docs.spring.io/spring-boot/docs/1.5.4.RELEASE/reference/htmlsingle/#boot-features-cors
[http_docs.spring.io_spring_docs_4.3.9.RELEASE_spring-framework-reference_htmlsingle_cors]: http://docs.spring.io/spring/docs/4.3.9.RELEASE/spring-framework-reference/htmlsingle/#cors
[SouthEast]: /images/20220520/66a7d83bf319476f9a1c980677998018.png
[http_localhost_63342_springboot-demo_springboot-cros_static_test.html_ijt_ibtt432ffb9rh0vffqkkug3je8]: http://localhost:63342/springboot-demo/springboot-cros/static/test.html?_ijt=ibtt432ffb9rh0vffqkkug3je8
[SouthEast 1]: /images/20220520/75971f833f244bcd88ffca08380b9171.png
[SouthEast 2]: /images/20220520/c3a360486369450cb679749976cd54c1.png
[SouthEast 3]: /images/20220520/acd0cd445fcb491abbbdfac0abeeb5d6.png