前后端完全分离使用Ajax的使用及跨域问题/Session的数据共享

介绍在前后端完全分离的项目中的使用和相关的问题

Ajax 的使用：

基本格式：
$.ajax({name:value, name:value, ... })
1. url
2. fuction(rsp): 回调函数，以及接收后端传递的参数
3. data ：向后端传递的参数
4. type ：传递参数的方式 get/post/put
5.  contentType：发送数据到服务器时所使用的内容类型[注意]
默认是："application/x-www-form-urlencoded"。



博客链接：https://blog.csdn.net/qq_30938705/article/details/79455073 

例如：
jQuery(document).ready(function(){
			//绑定事件用于向后端发送手机号获取验证码
            $("#getotp").on("click",function(){
            	$.ajax({
            		type:"get",
            		
            		url:"http://localhost:8080/getotp",
            		
            		async:true,
            		
            		data:{
            			"telphone":$("#telphone").val()
            		},
            		
            		success:function(data){
            			if(data.status=="success"){
            				alert("短信发送成功");
            			}else{
            				alert("短信发送失败，失败原因："+data.data.errMsg);
            			}
            		},
            		
//            		error:fuction(data){}
            	});
            });
		});

出现的问题：跨域

Access to XMLHttpRequest at 'http://localhost:8080/getotp' from origin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

html 进行的是本地文件的访问，但是后端的程序是：localhost 的访问，请求是可以发出去的并且服务器也可以正确的返回，ajax 在处理的时候认为他们的域不同。这种回调会不安全的，无法正确进入success。这种访问是跨域的
解决方法：

1. 让response 可以返回Access-Control-Allow-Origin这个header 为所有的域（*）
   springboot 提供的方式：添加注解 @CrossOrigin 表示请求返回是跨域的

此时请求返回头就会添加：

这样设置是有缺陷的
因为设置为所有的请求都可以这也存在安全问题
更加详细的设置可以在springMVC 的Filter 中进行设置

关于跨域问题

同域：同一个IP，同一个网络协议，同一个端口满足三个条件就是同域，
为什么会有同域和不同域：
当我们在浏览器中打开百度和谷歌两个网站时，百度浏览器在执行一个脚本的时候会检查这个脚本属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行，如果没有同源策略，那随便的向百度中注入一个js脚本，弹个恶意广告，通过js窃取信息，这就很不安全了。
跨域请求，就是说浏览器在执行脚本文件的ajax请求时，脚本文件所在的服务地址和请求的服务地址不一样。

---

在完全分离的前后端项目中，出了请求的跨域问题，还有session 数据共享问题
问题描述：session 数据共享

在一个函数中向session 中存储数据，在下一次请求执行的函数函数中从session 中取出相应的数据，此时就会出现取出的数据为null

原因描述：

httpServletRequest.getSession().getId()  ；获取两个Session 的id 是不一样的
因为跨域SESSIONID 每次请求都会变化，所以无法获取一样的Session，当然也无法获取相应的数据

springboot 中的解决办法：
后端设置：@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")
在前端的Ajax中：

 xhrFields: {
            		withCredentials: true
        			},

表示允许在跨域请求中保证sessionID 只有一个

allowHeader 的设置还是* 表示可以接受任何域的访问，其实这样是不合理的，根据自己的需要，可以设置Servlet的Filter，该后端允许接受的域的访问