ajax跨域

时间 2019-11-19

标签 ajax 栏目 Ajax 繁體版

原文原文链接

　　因工做需求，须要给一个移动端写一个登陆验证。具体需求：由移动端访问java项目并传递相应的参数，项目后台接收参数并进行查询判断，而后返回给移动端，从而是移动端完成登陆。css

　　解决步骤一，首先要在java项目中编写一个免登录的方法，java项目正常都会有登陆验证，想要访问项目中的某个方法时，均须要先进行登陆，有个过滤器能够控制。个人登陆验证方法以下：html

/**
     * @param p
     * @throws Throwable
     */
    @Around("allMethod()")
    public Object apple(ProceedingJoinPoint p) throws Throwable {    
        /** 初始化参数 */
        InitArgs(p);
        if(map!=null&&request!=null){
            map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage"));
        }
        boolean isReturnMAV = p.getSignature().toLongString().contains("org.springframework.web.servlet.ModelAndView");
        boolean isAjax = methodName.startsWith("aj_");
        boolean video = methodName.equals("video");
        Map<String, Object> paramMap = new HashMap<String, Object>();
        /** 验证登陆 */
        LoginUser loginUser = (LoginUser)session.getAttribute(Constant.SS_LOGIN_USER);
　　　　//当用户为空 而且isNeedValidLogin这个方法为true的时候才能走如下方法
        if(loginUser == null && isNeedValidLogin(className, methodName)){
            if(!isAjax){
                if(video){
                    HttpSession session2 = request.getSession();
                    int id = Integer.parseInt(request.getParameter("id"));
                    int equId = Integer.parseInt(request.getParameter("equId"));
                    Equ equ = equManager.doGet(Equ.class, equId);
                    List<Media> mlist = mediaManager.getListByequId(equId,1L);
                    Media media = mediaManager.getById(id,1L);
                    session2.setAttribute("melist",mlist);
                    session2.setAttribute("mlist",media);
                    session2.setAttribute("equ",equ);
                    return "/equ/video3";
                }
                return isReturnMAV ? new ModelAndView("redirect:/system/logout.htm") : "redirect:/system/logout.htm";
            }else{
                ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-901, "会话超时!请从新登陆! ", ""));
            }
        }
        /** LoginUser */
        paramMap.put("LoginUser", loginUser);
        paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau"));
        
        if(SystemController.class.toString().contains(className) && !",aj_setting,dialog_set_wgt,home,index,".contains(","+methodName+",")){
            if(loginUser != null && loginUser.IS_WGT && (loginUser.GROUP_ID == null || loginUser.WTIME_ID == null)){
                if(!isAjax){
                    Object result = p.proceed();
                    return     result;
                }else{
                    ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-903, "请求超时! ", ""));
                }
            }
        }
        try {
            //执行方法
            Object result = p.proceed();
            //获取页面样式标记
            Object cssTip = RequestUtil.getSessionAttr(session, Constant.SS_PAGE_CSS);
            if(cssTip == null){
                RequestUtil.setSessionAttr(session, Constant.SS_PAGE_CSS, "mcss/baitian.css");
            }
            
            if(result != null && !result.toString().contains("redirect:")){
                if(map!=null&&request!=null){
                    map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage"));
                }
                paramMap.put("PAGE_TITLE", Constant.PAGE_TITLE);
                /*if(request!=null){
                    paramMap.put("PATH_", request.getContextPath());
                }*/
                
                //paramMap.put("REQ_URI", request.getRequestURI());
                if(loginUser != null){
                    //System.out.println(loginUser.UNAME);
                    //map.put("M_MENU_AUTH", ","+loginUser.MENU_AUTH+",");
                    paramMap.put("M_ACTION_AUTH", Common.Base64EncodeStr(","+loginUser.ACTION_AUTH+","));
                    //paramMap.put("SYS_MENU_MAP", GlobalUtil.SysMenuMap);
                    //paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau"));
                    paramMap.put("SYS_MENU_MAP_", GlobalUtil.SysMenuMap_);
                    /** 记录处理用户当前正在操做的菜单ID，涉及菜单选中、当前位置 */
                    /*InitMenu_(paramMap);*/
                }
            }

            //获取args_参数 并放入map
            if(request!=null){
                String args_ = RequestUtil.getStringParam(request, "args_", "");
                if(!"".equals(args_)){
                    paramMap.put("args_", args_);
                }
                if(map != null){
                    map.putAll(paramMap);
                }else{
                     for (Iterator<String> keys = paramMap.keySet().iterator(); keys.hasNext();) {
                         String key = keys.next();
                         request.setAttribute(key, paramMap.get(key));
                     }
                }
            }
            
            return result;
        } catch (Exception ex) {
            ex.printStackTrace();
            if(!isAjax){
                String exceptUrl_ = "redirect:/system/except.htm?id_="; 
                return isReturnMAV ? new ModelAndView(exceptUrl_) : exceptUrl_;
            }else{
                ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-902, "操做失败! 异常："+ex.getMessage(), ex.getMessage()));
            }
        }
        return null;
    }

    /**
     * 后台-- 是否须要验证 登陆
     * @param className
     * @param methodName
     * @return
     */
    private static boolean isNeedValidLogin(String className, String methodName){
        if(SystemController.class.toString().contains(className)){
　　　　　　//当知足如下条件的时候isNeedValidLogin（）方法为false,aj_mbUser此方法即移动端访问项目的方法
            if(",gologin,dologin,logout,except,aj_mbUser,".contains(","+methodName+",")){
                return false;
            }
        }
        if(MyHandlerExceptionResolver.class.toString().contains(className)){
            return false;
        }
        if(MediaController.class.toString().contains(className)){
            if(",doTime1,".contains(","+methodName+",")){
                return false;
            }
        }
        return true;
    }

　　步骤二：以上是为了实现当移动端访问项目时的免登录功能，如下为移动端访问项目的方法。觉得，移动端访问java项目，属于跨域访问，因此添加了ResponseBody属性java

@RequestMapping("/sysuser/aj_mbuser.htm")
    @ResponseBody
    public String aj_mbUser(HttpServletRequest request,HttpServletResponse response,
            String callback,String userName,String passWord,ModelMap model) throws Exception{
        
        TSysUser user = sysUserManager.getSysUserByLogin(userName, passWord);
        String result = "false";

        if(user!=null&&user.getId()>0){
             result = "{'isOk':'true'}";
            
        }else{
             result = "{'isOk':'false'}";
        }
        result = callback+"("+result+")";
        return result;

    }

　　步骤三：页面中的方法以下，dataType切记，是jsonp格式，不是jeson格式，而且jsonp属性后边是callback。jquery

function submitForm(){
            var uname=$("#uname").val();
            var upass=$("#upass").val();
            var url="http://211.103.196.218:8083/yyhspx/sysuser/aj_mbuser.htm";
            $.ajax({
                type: "POST",//请求方式
                url: url,
                dataType: "jsonp",
                jsonp: "callback",
                data: {
                    "userName": uname,
                    "passWord": upass
                },
                success : function(data) {
                    if(data.isOk=='true'){
                        window.location.href="index.html";
                    }else{
                        alert("用户名或者密码错误");
                    }
            },
                error : function() {
                alert("用户名或者密码错误");
        }
    });

<input type="text" name="" class="userName" placeholder="admin" id="uname">
        <input type="password" name="" class="passWord"  value="admin" id="upass">
        <input type="button" name="" onclick="submitForm()" class="subBut" value="登陆">

　对于json和jsonp的区别，来自另一个博客，地址：http://www.cnblogs.com/sunxucool/p/3433992.html　git

json格式：

{
    "message":"获取成功", "state":"1", "result":{"name":"工做组1","id":1,"description":"11"} }

jsonp格式：

callback({
    "message":"获取成功", "state":"1", "result":{"name":"工做组1","id":1,"description":"11"} })

看出来区别了吧，在url中callback传到后台的参数是神马callback就是神马，jsonp比json外面有多了一层，callback()。这样就知道怎么处理它了。因而修改后台代码。github

后台java代码最终以下：web

@RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; }

注意这里须要先将查询结果转换我json格式，而后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就能够作进一步处理了。ajax

追求永无止境，在google的过程当中，无心中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。spring

有第一种方式的基础，使用jsonp插件也就比较简单了，server端代码无需任何改动。json

来看一下如何使用jquery-jsonp插件解决跨域问题吧。

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.jsonp({ "url": url, "success": function(data) { $("#current-group").text("当前工做组:"+data.result.name); }, "error": function(d,msg) { alert("Could not find user "+msg); } });

至此两种解决跨域问题的方式就所有介绍完毕。

1. ajax 跨域 headers JavaScript ajax 跨域请求
2. ajax及ajax跨域
3. JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)
4. Ajax及跨域
5. ajax 跨域
6. ajax跨域-CORS
7. AJAX跨域
8. ajax跨域
9. Ajax跨域
10. jquery ajax跨域
更多相关文章...
• 网站域名 - 网站主机教程
• XSL-FO 区域 - XSL-FO 教程
• PHP Ajax 跨域问题最佳解决方案
• 使用阿里云OSS+CDN部署前端页面与加速静态资源