一、验证码

验证码：屏障，防止*力暴**破解

1、导入依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2、声明验证码组件

<!--声明验证码-->
<servlet>
    <servlet-name>kap</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <init-param>
        <param-name>kaptcha.border</param-name>
        <param-value>no</param-value>
    </init-param>
    <init-param>
        <param-name>kaptcha.textproducer.char.length</param-name>
        <param-value>4</param-value>
    </init-param>
    <init-param>
        <param-name>kaptcha.textproducer.char.string</param-name>
        <param-value>abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWSYZ1234567890</param-value>
    </init-param>
    <init-param>
        <param-name>kaptcha.background.clear.to</param-name>
        <param-value>211,229,237</param-value>
    </init-param>
    <init-param>
        <!--session.setAttribute("kaptcha","验证码")-->
        <param-name>kaptcha.session.key</param-name>
        <param-value>kaptcha</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>kap</servlet-name>
    <url-pattern>/captcha</url-pattern>
</servlet-mapping>

3、Page

完成1、2步骤，即可访问 http://xxxx:xx/captcha

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
    <title>验证码</title>
</head>
<body>
    <input type="text">
    <img onclick="refreshCode(this)" src="${pageContext.request.contextPath}/captcha" style="width: 100px;vertical-align: middle">
    <script>
        function refreshCode(cap) {
            cap.src = "${pageContext.request.contextPath}/captcha?"+new Date().getTime();
        }
    </script>
</body>
</html>

//?new Date().getTime() 
//当浏览器发送get请求时，浏览器会进行缓存，所以我们在刷新验证码时发出相同的请求，浏览器可能从缓存中取值，导致图片无法刷新，加上new Date().getTime()参数可以保证每次请求不同，不会从浏览器取缓存

二、Ajax跨域

域：协议+IP+端口

http://localhost:8989

http://localhost:8080

http://baidu.com:80

协议、IP、端口只要其中任何一个不同，就是跨域

1、解决方案

function kuayu() {
	var xhr = new XMLHttpRequest();
	xhr.open("get","http://localhost:8080/cross/test1");
	xhr.send();
	xhr.onreadystatechange=function(){
		if (xhr.readyState==4 && xhr.status == 200){
			console.log(xhr.responseText);
		}
	}
}

在被访问方的Controller类或方法上，添加如下注解：

@CrossOrigin(origins = "http://localhost:8989")
public class CrossOController(){
 .....
}

2、跨域携带cookie

A不仅要能访问B，还能在请求中携带B的cookie，进而保证B中运行时有cookie可用

添加 xhr.withCredentials=true;

表示发请求时携带cookie

function kuayu() {
	var xhr = new XMLHttpRequest();
	xhr.open("get","http://localhost:8080/cross/test1");
	xhr.withCredentials=true;
	xhr.send();
	xhr.onreadystatechange=function(){
		if (xhr.readyState==4 && xhr.status == 200){
			console.log(xhr.responseText);
		}
	}
}

在注解中添加属性

origins = "http://localhost:8989",允许响应域A

allowCredentials = "true"（默认是alse），允许跨域携带cookie

@CrossOrigin(origins = "http://localhost:8989",allowCredentials = "true")
public class CrossOController(){
 .....
}

3、完整示例

域A为：http://localhost:8989

域B为：http://localhost:8080

<%@ page pageEncoding="utf-8" %>
<html>
<body>
<h2>Hello World!</h2>
<script>
    function kuayu() {
        var xhr = new XMLHttpRequest();
        xhr.withCredentials=true;
        xhr.open("get","http://localhost:8080/cross/test1");
        xhr.send();
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status == 200){
                console.log(xhr.responseText);
            }
        }
    }

    function kuayu2() {
        var xhr = new XMLHttpRequest();
        xhr.withCredentials=true;
        xhr.open("get","http://localhost:8080/cross/test2");
        xhr.send();
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status == 200){
                console.log(xhr.responseText);
            }
        }
    }
</script>
<input type="button" value="跨域" onclick="kuayu();">
<input type="button" value="跨域2" onclick="kuayu2();">
</body>
</html>

@CrossOrigin(origins = "http://localhost:8989",allowCredentials = "true")
@Controller
@RequestMapping("cross")
public class CrossController {

    @RequestMapping("test1")
    @ResponseBody
    public User test1(HttpSession session){
        System.out.println("跨域test1··");
        System.out.println(session.getId());
        session.setAttribute("name","里斯");
        return new User(1,"张三",true,new Date());
    }

    @RequestMapping("test2")
    @ResponseBody
    public User test2(HttpSession session){
        System.out.println("跨域test2··");
        System.out.println(session.getId());
        System.out.println(session.getAttribute("name"));
        return new User(1,"张三",true,new Date());
    }
}

springmvc引入websocket,如何处理springmvc的跨域问题

springmvc中使用ajax (springmvc实现验证码登录)