ToB企服应用市场:ToB评测及商务社交产业平台

标题: 通过过滤器实现前后端分离的跨域问题 [打印本页]

---

作者: 瑞星    时间: 2022-9-16 17:15
标题: 通过过滤器实现前后端分离的跨域问题
创建过滤器解决跨域问题

（就是前后端在不同服务器上运行）注意：局部和全局只能选择一种！！！
本文只讲述了解决跨域问题的方法，不提供源码讲解。

开启跨域配置

如果使用了springsecurity则需要在securityconfig中添加 .cors()

全局开启：

1. SecurityConfig:(随便一个config都行，这里就先放在securityconfig里)
3. @Bean
4. public CorsFilter corsFilter() {
5.     //创建CorsConfiguration对象后添加配置
6.     CorsConfiguration config = new CorsConfiguration();
7.     //设置放行哪些原始域，这里直接设置为所有
8.     config.addAllowedOriginPattern("*");
9.           //你可以单独设置放行哪些原始域 config.addAllowedOrigin("http://localhost:2222");
10.     //放行哪些原始请求头部信息
11.     config.addAllowedHeader("*");
12.     //放行哪些请求方式，*代表所有
13.     config.addAllowedMethod("*");
14.     //是否允许发送Cookie，必须要开启，因为我们的JSESSIONID需要在Cookie中携带
15.     config.setAllowCredentials(true);
16.     //映射路径
17.     UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
18.     corsConfigurationSource.registerCorsConfiguration("/**", config);
19.     //返回CorsFilter
20.     return new CorsFilter(corsConfigurationSource);
21. }

复制代码

局部开启：在controller类上加注解@CrossOrigin（ 可以详细看注解里面的设置

1. @CrossOrigin
2. @RestController
3. @RequestMapping("/api/user")
4. public class AccountApiController {
7. }

复制代码

设置前端发送的请求携带cookie

如果是自己写的前端需要在发送每个请求的时候带cookie信息（自定义请求，开启get、post请求时带cookie）

1. function get(url,data, success){
2.     $.ajax({
3.         type: "get",
4.         url: url,
5.         data:data,
6.         async: true,
7.         dataType: 'json',
8.         xhrFields: {
9.             withCredentials: true        //开启携带cookie信息，用于security识别用户是否登录
10.         },
11.         success: success
12.     });
13. }
16. function post(url, data, success){
17.     $.ajax({
18.         type: "post",
19.         url: url,
20.         async: true,
21.         data: data,
22.         dataType: 'json',
23.         xhrFields: {
24.             withCredentials: true
25.         },
26.         success: success
27.     });
28. }
30. //举例：
31. function initUserInfo() {
32.     get('http://localhost:8080/api/user/info', {},function (data) {     //这里要加{}，告诉data是空，否则会吧后面的当作data
33.         if (data.code === 200) {
34.             alert("登录成功,欢迎" + data.data.username + "进入图书管理系统！")
36.         } else {
37.             alert(data.reason)
38.             window.location = "http://localhost:8080/login.html"
39.         }
40.     })
41. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4