redis+token实现登录校验，前后端分离，及解跨域问题的4种方法

快来打我* 2024-03-27 17:00 12阅读 0赞

**目录**

一、使用自定义filter实现跨域

1、客户端向服务端发送请求

2、服务端做登录验证了，并生成登路用户对应的token，保存到redis

3、响应（报错）-----跨域问题

4、解决跨域问题--------服务器端添加过滤器，设置请求头

5、重新登录正确响应

6、客户端登redis录后访问页面，需要经过拦截器验证登录状态

7、编写拦截器

二、在任意配置类，返回一个 新的 CorsFIlter Bean

三、使用注解 (局部跨域)

四、手动设置响应头(局部跨域)

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

前提：前后端分离

### 一、使用自定义filter实现跨域 ###

#### 1、客户端向服务端发送请求 ####

使用ajax实现登录

#### 2、服务端做登录验证了，并生成登路用户对应的token，保存到redis ####

@RequestMapping ("/login.do")
        public String login(String userCode, String userPassword, Model model){
            User user = userService.login(userCode,userPassword);
            if(user!=null){
                //使用UUID生成token
                String token = UUID.randomUUID().toString().replace("-","");
                //把token保存到redis中，时效1小时
                RedisTools.setEx(token,user.getUserName(),1,TimeUnit.HOURS);
                System.out.println(token);
                return token;
            }
            return "";
        }

#### 3、响应（报错）-----跨域问题 ####

![a0bca82c5c1a4f6286231d8e7c28b72f.png][]

#### 4、解决跨域问题--------服务器端添加过滤器，设置请求头 ####

@Component
    @WebFilter("/**")
    public class MyCorsFilter implements Filter {
    
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            //设置字符集编码
            HttpServletRequest request = (HttpServletRequest) req;
            request.setCharacterEncoding("UTF-8");
            HttpServletResponse response = (HttpServletResponse) res;
            response.setCharacterEncoding("UTF-8");
            //"*"：允许任何请求源访问，实际生产环境按公司要求
            response.setHeader("Access-Control-Allow-Origin", "*");
            //设置请求方式
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            //最大时间
            response.setHeader("Access-Control-Max-Age", "3600");
            //response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
            //添加自定义的请求头信息，"*"任何自定义请求头信息
            response.setHeader("Access-Control-Allow-Headers", "*");
            System.out.println("*********************************过滤器被使用**************************");
            //放行
            chain.doFilter(req, res);
        }
    }

#### 5、重新登录正确响应 ####

![cbf7fed3b44344cabf27fa02302ed053.png][]

#### 6、客户端登redis录后访问页面，需要经过拦截器验证登录状态 ####

客户端登录发送请求时，将token放入请求头中： headers:\{"token":localStorage.token\},

#### 7、编写拦截器 ####

从请求头中获取token的值，判断是否不为空，且token这个key存在于rdeis中，若存在则放行，反之拦截

public class SysIntercerptor implements HandlerInterceptor {
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
            String token = request.getHeader("token");
            if(StringUtil.isNullOrEmpty(token) || !RedisTools.hasKey(token)){
                System.out.println("登录已过期");
                PrintWriter out = response.getWriter();
                out.println("alert('登录已过期，请重新登录')");
                return false;
            }
            return true;
        }
    }

前端

![8c1a3918b2254e52ad929e29f6bec34e.png][]

后端

![ec8a9cefe5d04a4896c5b28e0a926189.png][]

#### 二、在任意配置类，返回一个 新的 CorsFIlter Bean ####

@Configuration
    public class CorsConfig  implements WebMvcConfigurer {
        //方式1
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            // 设置允许跨域的路由
            registry.addMapping("/**")
                    //是否发送Cookie是否允许证书（cookies）
                    .allowCredentials(true)
                    // 设置允许跨域请求的域名------------修改此行//放行哪些原始域
                    //.allowedOrigins("*")
                    .allowedOriginPatterns("*")
                    // 设置允许的方法
                    .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                    .allowedHeaders("*")
                    .exposedHeaders("*");
    
        }
            //方式2
    //    @Override
    //    public void addCorsMappings(CorsRegistry registry){
    //        registry.addMapping("/*/**")
    //                .allowedHeaders("*")
    //                .allowedMethods("*")
    //                .maxAge(1800)
    //                .allowedOrigins("*");
    //    }
        
    }

When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead
    当allowCredentials为true时，allowedOrigins不能包含特殊值“*”，因为不能在“Access Control Allow Origin”响应标头上设置该值。要允许一组来源的凭据，请显式列出它们或考虑改“allowedOriginPatterns”

/*将红框中的.allowedOrigins("*")替换为.allowedOriginPatterns("*")即可*/

#### 三、使用注解 (局部跨域) ####

@CrossOrigin(origins = "*")

#### 四、手动设置响应头(局部跨域) ####

使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域，这里 Origin的值也可以设置为 “\*”,表示全部放行。

@RequestMapping("/index")
    public String index(HttpServletResponse response) {
        response.addHeader("Access-Allow-Control-Origin","*");
        return "index";
    }

[a0bca82c5c1a4f6286231d8e7c28b72f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/690a3d0160e64445a106034fcb2ecab8.png
[cbf7fed3b44344cabf27fa02302ed053.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0cab70ac903b4944a440809d6f58b0cd.png
[8c1a3918b2254e52ad929e29f6bec34e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9a89f8f3ae5546ab9a21c2be53217e00.png
[ec8a9cefe5d04a4896c5b28e0a926189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cd22182e2a12428899656e7574be7e54.png