SpringBoot框架 -- AJAX跨域实现

「爱情、让人受尽委屈。」 2023-06-08 06:44 66阅读 0赞

## SpringBoot框架 – AJAX跨域实现 ##

本章基于：[异常封装][Link 1]

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

前文已经对于SpringBoot简单交互实现了异常封装，那么在此基础上面，如果做前后端交互，该如何处理，做一个简单的前后端分离。也是现在企业级常用的处理方式

新建空项目

#### 第一步，新建项目架构 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70]  
**创建user包引入jsquery，创建html页面**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
    </head>
    <body>
    
    <div>
        <h3>获取top信息</h3>
        <div>
            <label>手机号码</label>
            <div>
                <input type="text" placeholder="手机号" name="telphone" id="telphone">
            </div>
        </div>
        <div>
            <button id="gitotp" type="submit">
                获取短信
            </button>
        </div>
    </div>
    
    <script language="JavaScript">
        $(document).ready(function () { 
    
            $("#gitotp").bind("click", function () { 
                var telphone = $("#telphone").val()
                if (telphone==null||telphone==""){ 
                    alert("请输入手机号码")
    
                }
                $.ajax({ 
                    type: "post",
                    url: "http://localhost:80/user/getotp",
    
                    data: { 
                        "telphone": $("#telphone").val()
    
                    },
                    success: function (data) { 
                        if (data.status == "success") { 
                            alert("otp已经发到手机上，请注意查收")
                        } else { 
                            alert("otp发送失败，原因为" + data.data.errMsg)
                        }
    
    
                    },
                    error: function (data) { 
                        alert("otp发送失败，因为" + data.responseText)
    
                    }
    
                });
    
    
            })
    
    
        })
    
    
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 1]

回调如果成功由于后台设置的返回相应为ok所以取返回数据的json状态success  
如果回调失败返回响应文档

#### 第二步：后台添加crossorgin，并指定响应请求post与ajax请求type类型相同 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 2]

@RequestMapping(value = "/getotp",method = { RequestMethod.POST})
        @ResponseBody
    
        public CommonReturnType getOtp(@RequestParam(name = "telphone") String telphone) { 
            //需要一定规则生成Otp验证码 创建随机验证码
            Random random = new Random();
            int randomInt = random.nextInt(99999);
            randomInt += 10000;
            String otpCode = String.valueOf(randomInt);
    
            // 将otp验证码同时应用户的手机号码关联，使用httpsession方式绑定
            //键值对管理啊
            httpServletRequest.getSession().setAttribute(telphone, otpCode);
            System.out.println(otpCode);
    
            return CommonReturnType.create(null);
        }

**解决跨域的请求 添加注解 @crossorgin**

![在这里插入图片描述][20191017142414597.png]

**启动容器校验，页面发送请求**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 3]

#### 备注 ####

@Crossorgin注解的默认为\*请求，所以所有请求都可以跨域。在这个问题上面如果有限制可以这么写

![在这里插入图片描述][20191017142856683.png]  
源码如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 4]

[Link 1]: https://blog.csdn.net/weixin_44550490/article/details/102584436
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70]: /images/20230531/f199c007a694467c85a066a894e6bf1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 1]: /images/20230531/6fb2cb701b6d4c8eb33eb4800312dfe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 2]: /images/20230531/1bbcb29f03984c2f9cbd49b123a01b7a.png
[20191017142414597.png]: /images/20230531/e1f7466edc8f4ad29fd65b40f266dee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 3]: /images/20230531/3e91b43cb32243ff8c20ab1f216c5cb5.png
[20191017142856683.png]: /images/20230531/26975e287d7a4408a36cd9be482f73aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MDQ5MA_size_16_color_FFFFFF_t_70 4]: /images/20230531/09aca8c40b3f4026bf90adfc4fe0f985.png