跨域解决方式

忘是亡心i 2022-05-26 02:21 177阅读 0赞

今天做毕业设计又遇到问题，主要是跨域问题。  
1.跨域请求头问题。  
**方式一：**  
响应头加上：一下代码，其他不用任何处理，推荐方法

/** * 用户登陆 * @param name 账号 * @param password 密码 * @param code 验证码 * @param req * @param res * @return * @throws IOException * @throws ServletException */
        @RequestMapping(value="/login.do")
        @ResponseBody
        public JsonResult<User> login(String phone, String password, String code, HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException{
            // 设置：Access-Control-Allow-Origin头，处理Session问题
            res.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
            res.setHeader("Access-Control-Allow-Credentials", "true");
            res.setHeader("P3P", "CP=CAO PSA OUR");
            if (req.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(req.getMethod())) {
                res.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
                res.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
                res.addHeader("Access-Control-Max-Age", "120");
            }
            //通过用户的sessionid 得到预先存的验证码
            String sessioncode  = req.getSession().getAttribute(req.getSession().getId()).toString().toLowerCase();
            //你可以不加下面的代码，这是我的测试
            JsonResult<User> result = new JsonResult<User>();
            result.setMsg(sessioncode);
            return result;
        }

2.遇到session为null异常，空指针异常  
**第二种方式：**  
添加注解@CrossOrigin可以是在类上也可以是在方法上，这个方法主要是因为我的session跨域问题，导致session无效（null），注意操作流程是，先获取验证码，在登陆对比验证码  
后台java代码

@Controller
    @CrossOrigin
    @RequestMapping(value = "user")
    public class LoginAction { 
        @Resource
        private UserService userService;
        /** * 用户登陆 * @param name 账号 * @param password 密码 * @param code 验证码 * @param req * @param res * @return * @throws IOException * @throws ServletException */
        @RequestMapping(value="/login.do" )
        @ResponseBody
        public JsonResult<User> login(String phone, String password, String code, HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException{
            // 设置：Access-Control-Allow-Origin头，处理Session问题
            /*res.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin")); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("P3P", "CP=CAO PSA OUR"); if (req.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(req.getMethod())) { res.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept"); res.addHeader("Access-Control-Max-Age", "120"); }*/
                /* 这里不使用注解，外加跨域的话session为null，你可以使用debug调式测试 */
            String sessioncode  = req.getSession().getAttribute(req.getSession().getId()).toString().toLowerCase();
    
                /*你可以不加下面代码，这是我的测试*/
            JsonResult<User> result = new JsonResult<User>();
            result.setMsg(sessioncode);
            return result;
        }
        /** * 获取验证码接口 用于用户登陆验证码的验证 * @param req * @return * @throws IOException */ 
        @RequestMapping(value="/img.do", produces="image/png" )
        @ResponseBody 
        public byte[] img(HttpServletRequest req ) throws IOException{       
            ImageUtil image = new ImageUtil();
            Object [] obj = image.createImage();
            //将 img 进行编码 为 png 格式
            //FileOutputStream out = new ...;
            ByteArrayOutputStream out = new ByteArrayOutputStream();
            ImageIO.write((BufferedImage) obj[1], "png", out);
            //验证码放在session中
            System.out.println(req.getSession().getId());
            req.getSession(true).setAttribute(req.getSession().getId(), obj[0].toString());
            System.out.println(req.getSession().getAttribute(req.getSession().getId()));
            //拿到数组
            byte[] png=out.toByteArray();
            return png;
        }
    }

前端请求，需要加上**xhrFields:\{withCredentials:true\},**，执行跨域请求的说明

省略html代码
    function login() { 
            var p = $("#phoneNumber").val();
            var pa = $("#password").val();
            var yz = $("#yanzhengma").val();
            if($("#phoneNumber").val() == ''){
               layer.msg('电话号码不能为空！')
            }else if($("#password").val() == '') {
                layer.msg('密码不能为空！')
            }else if($("#yanzhengma").val() == ''){
                layer.msg('验证码不能为空！')
            }else{
                $.ajax({
                    url : mainurl + "user/login.do",
                    type : "post",
                    data : {
       "phone":p,"password":pa,"code":yz},
                    dataType : "json", 
                    //注意重点这里加上这句话
                    xhrFields:{withCredentials:true},
                    //contentType: "application/json;charset=UTE-8",
                    success : function(result) { 
                    console.log(result);
                        if (result.state == 0) {
                        } else if (result.state == 1) {
                            alert(result.msg);
                        }
                    },
                    error : function() { 
                        alert("查询信息异常!");
                    }
                }); 
            //后台解决跨域 session为null
            }
        }

这里两个问题，都遇到了，也是我第一次遇到，当然小白开发少，不过问题总是好滴，解决过程是心酸的。  
总结第一个问题，比较容易发现，第二个问题，没有经验的话是不容易发现的，我debug调试后发现session为null就纠结了几个小时，一直以为是前台问题，外加第一次接触vue，所以一直觉得肯定是vue的问题，就去验证。。。。然后就循环纠结了，不知道哪根筋突然想起跨域，这才解决了。  
感谢路上解惑的人，也感谢bug，以上只是个人问题，希望大家提出意见。