• 前后端分离,session登录实例,jquery版本必须大于1.5,否则withCredentials不起作用


    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head>
    <meta charset="UTF-8"><title>Title</title><script type="text/javascript"src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script>
    ` function checkForm() { $.ajax({type :"POST",
    url :"http://localhost:18087/DictEvent/login",
    dataType :"json",
    contentType:"application/json;charset=utf-8",
    data : JSON.stringify({username:1}),
    xhrFields: {withCredentials: true},
    crossDomain: true,
    success :function(test) {

                    console.log(test);
                    alert("登录成功")
                    $(window).attr('location', './index.html');
                },
            });
        }
    

    function checkForm1() {

            $.ajax({
                type :"POST",
                url :"http://localhost:18087/DictEvent/getOrder",
                dataType :"json",
                async:true,
                xhrFields: {
                    withCredentials: true
    				
                },
                crossDomain: true,
                data : {username:1},
                success :function(test) {
                    console.log(test);
    				
                },error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 状态码
                    console.log(XMLHttpRequest.response);
                    alert(XMLHttpRequest.response)
                    console.log(textStatus);
                    $(window).attr('location', './login.html');
                }
            });
        }
    

    </script>
    </head>
    <body>
    <div id="change_margin_1">
    <input class="user" type="text" name="user" placeholder="请输入用户名" >
    </div>
    <p id="remind_1"></p>
    <div id="change_margin_2">
    <input class="password" type="password" name="password" placeholder="请输入密码" >
    </div>
    <div><input type="submit" value="注册" onclick="checkForm()"></div>
    <div><input type="submit" value="查看订单" onclick="checkForm1()"></div>
    </body>
    </html>

    跨域Filter
    @Component
    public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;
    
        ServletRequestAttributes servletRequestAttributes = (ServletRequestAttributes)RequestContextHolder.getRequestAttributes();
        HttpServletRequest request1 = servletRequestAttributes.getRequest();
        String Session = request1.getHeader("users");
        System.out.println("Session: " +Session);
    
        String origin = "*";
        if(req.getHeader("Origin")!=null){
            origin = req.getHeader("Origin");
        }
    
        // 允许http://www.xxx.com域(自行设置,这里只做示例)发起跨域请求
        res.setHeader("Access-Control-Allow-Origin", origin);
        // 允许跨域请求包含content-type
        res.setHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,Access-Token,X-Requested-With,token,x-auth-token");
    

    // res.setHeader("Access-Control-Allow-Origin", request2.getHeader("Origin"));
    // 设置允许跨域请求的方法
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT,OPTIONS");
    // 设置允许Cookie
    res.setHeader("Access-Control-Allow-Credentials", "true");

        // 设置允许跨域请求的方法
        res.setHeader("Access-Control-Max-Age", "3600");
    
        res.setContentType("application/json");
        res.setCharacterEncoding("utf-8");
        if (req.getMethod().equals("OPTIONS")) {
            res.setStatus(HttpServletResponse.SC_OK);
        }
        else
        {
            chain.doFilter(request, response);
        }
    
    }
    
    @Override
    public void destroy() {
    }
    
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    

    }

    session拦截器
    public class MyLoginInterceptor implements HandlerInterceptor {
    @Override
    public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
    throws Exception {
    }
    @Override
    public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
    throws Exception {
    }
    @Override
    public boolean preHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2) throws Exception {

        //首页路径以及登录放行
        if ("/index".equals(arg0.getRequestURI()) || "/login".equals(arg0.getRequestURI())) {
            return true;}
        //重定向------前台实现
        HttpSession session = arg0.getSession();
        arg0.getServletContext().log("sessionID: " + session.getId());
        Object object = session.getAttribute("users");
        if (null == object) {
            arg1.getWriter().write("Please Login In");
            return false;}
        return true;
    }
    

    }

    界面拦截器
    @Configuration
    public class MyWebMvcConfig implements WebMvcConfigurer {
    //全局跨域配置
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**") //添加映射路径
    .allowedOrigins("") //放行哪些原始域
    .allowedMethods("
    ") //放行哪些原始域(请求方式) //"GET","POST", "PUT", "DELETE", "OPTIONS"
    .allowedHeaders("*") //放行哪些原始域(头部信息)
    .allowCredentials(true) //是否发送Cookie信息
    // .exposedHeaders("access-control-allow-headers",
    // "access-control-allow-methods",
    // "access-control-allow-origin",
    // "access-control-max-age",
    // "X-Frame-Options") //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
    .maxAge(1800);
    }

    //注册拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new MyLoginInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/DictEvent/login")
                .excludePathPatterns("/DictEvent/out");
        //.excludePathPatterns("/static/**");
    }
    

    }

  • 相关阅读:
    ios ASI 断点下载
    ios 视频播放器MPMoviePlayerController
    ios SDWebImage 图片加载显示菊花
    ios简单的音频播放
    学iOS开发(一)——实现一款App之Foundation框架的使用
    学iOS开发(二)——实现一款App之编写自定义类
    蓝欧ios培训视频
    ios开发教程地址
    day15_雷神_前端03
    day14_雷神_前端02
  • 原文地址:https://www.cnblogs.com/adai-study-1030/p/15064469.html
Copyright © 2020-2023  润新知