跨域解决方式

今天做毕业设计又遇到问题,主要是跨域问题。
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,以上只是个人问题,希望大家提出意见。

猜你喜欢

转载自blog.csdn.net/ljcc122/article/details/80053048
今日推荐