前后端交互跨域问题及cookie&session浅谈

一、交互跨域问题

跨域问题的原因：根据同源策略，浏览器不允许ajax访问当前源之外的资源即不同域名之间相互访问，是浏览器对js的安全限制。（eg：前端和后端部署的端口号不同，且没有相应的跨域请求处理）

同一个域：同一协议；同一ip；同一端口；

解决方法小结：规避同源策略

1.后端自定义filter，在请求头里面加上参数；

实现Filter接口，新建一个名为CORSFilter的Filter；注册过滤器；在应用启动类中添加@ServeletComponentScan注解，项目启动时自动扫描serclet组件（参考文末“实例”连接）；

下面给出创建的filter：

package servlet;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//通过webfilter注册过滤器，给出过滤器名称和要被过滤的请求地址
@WebFilter(filterName = "/CORSFilter", urlPatterns = {"/*"})
public class CORSFilter implements Filter  {

    public CORSFilter() {}

    public void destroy() {}

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        //允许跨域的主机地址
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        //允许跨域的请求头
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "*");
        //允许跨域的请求方法
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "*");
        //是否允许携带cookkie
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
        //重新预检验跨域的缓存时间
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        
        chain.doFilter(httpServletRequest, httpServletResponse);
        
    }

    public void init(FilterConfig fConfig) throws ServletException {}

2.node服务器代理，将前端的请求通过node转发到后端，绕过跨域；（单独针对前端，无法处理端口和协议不同的情况）

3.CORS跨域资源共享

使用XMLHttpRequest对象，需要前后端http请求头一致。

更多XHR相关可以参考：https://blog.csdn.net/u013407012/article/details/93311096

用post方式进行Ajax请求：

var iris = new XMLHttpRequest();
iris.open("post","url","true");
//设置请求头（post方法需要自己设置）
iris.setRequestHeader("Content-Type","applcation/x-www-form-urlencode");
//发送数据
iris.send("name"+uaername);

CORS和Ajax的方法基本一致，把不同点在于open方法上，ajax使用的是相对路径，CORS使用的是完整路径。

更多细节讲解可以参考：https://www.ruanyifeng.com/blog/2016/04/cors.html

4.JSONP

没有CORS那么强大，只能支持GET请求，优势在于支持老服务器。但是不能解决不同域的两个页面之间的js调用问题。

运用src请求不同域，执行回调函数

①script标签引用：

<script>

function callbackData(jsondata){}

</script>

<script src='http://aaa.com/aaa.html?callback=callbackData'></script>

②jquery请求jsonp：

$.ajax({

    url:'http://aaa.com/aaa.html',

    dataType:'jsonp',

    jsonp:'jsonpcallback',

    success:function(data){

           //处理返回函数

    }

})

③vue-resource请求jsonp：

this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10',{},

{

       headers:{ },

       emulateJSON: true

}).then(

       function(response) {

       // 处理正确的回调

       },function(response) {

       // 处理错误的回调

});

5.flash插件

6.silverlight插件

7.document.domain跨子域

在各自的域中设置document.domain一致，可以实现跨域调用。设置时必须设置成自身或更高级的父域并且主域必须相同。

eg：http://www.aaa.com/a.html  与  http://aaa.com/b.html 是同一主域：aaa.com

8.window.name

9.HTML5的window.postMessage方法跨域

10.vue-proxytable服务器代理跨域

---以上是交互跨域的简单整理，待完善---

可以参考的博文：

后端方法：https://www.cnblogs.com/qintang/p/13821654.html 

https://www.cnblogs.com/wangwei0514/p/cors_.html

实例：https://blog.csdn.net/qq_38321137/article/details/113309117

前端方法：https://www.jianshu.com/p/b95813068827

https://www.ruanyifeng.com/blog/2016/04/cors.html

二、Cookie&Session简述

cookie和session都是跟踪浏览器的身份的会话方式，cookie像给用户通行证证明身份，session是通过id查找用户名单确认身份。

一个用户的所有操作都属于一个会话

cookie：

创建cookie： Cookie cookie = new Cookie("key","value");

cookie数据保存在客户端；服务器设置了cookie用户名，只要不关闭浏览器cookie变量一直有效，能保证长时间不掉线。

cookie被攻击的可能性比较大，最好不要保存登录等重要信息；

cookie过期时间可以在cookie生成的时候设置进去；

想要查看一个网站的cookie信息可以在浏览器地址栏输入javascript:alert(document.cookie);

cookie对象使用key-value属性对的形式保存用户状态，一个cookie对象保存一个cookie，一个request或者response同时使用多个Cookie。

cookie有不可跨域名性

cookie的常用属性：

属  性  名	描    述
String name	该Cookie的名称。Cookie一旦创建，名称便不可更改
Object value	该Cookie的值。如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码
int maxAge	该Cookie失效的时间，单位秒。如果为正数，则该Cookie在maxAge秒之后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为–1
boolean secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false
String path	该Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”
String domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
String comment	该Cookie的用处说明。浏览器显示Cookie信息的时候显示该说明
int version	该Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范

session：

第1次访问服务器，getSession创建对话，第2次...第N次访问时若getSession()会话存在返回原来对话否则重新创建对话。（session对象默认存活30min）

session数据保存在服务器端；sessionIDh是服务器和客户端连接时随机分配的。

session过期时间取决于服务器是设定；

HttpSession常用的方法：

方  法  名	描    述
void setAttribute(String attribute, Object value)	设置Session属性。value参数可以为任何Java Object。通常为Java Bean。value信息不宜过大
String getAttribute(String attribute)	返回Session属性
Enumeration getAttributeNames()	返回Session中存在的属性名
void removeAttribute(String attribute)	移除Session属性
String getId()	返回Session的ID。该ID由服务器自动创建，不会重复
long getCreationTime()	返回Session的创建日期。返回类型为long，常被转化为Date类型，例如：Date createTime = new Date(session.get CreationTime())
long getLastAccessedTime()	返回Session的最后活跃时间。返回类型为long
int getMaxInactiveInterval()	返回Session的超时时间。单位为秒。超过该时间没有访问，服务器认为该Session失效
void setMaxInactiveInterval(int second)	设置Session的超时时间。单位为秒
void putValue(String attribute, Object value)	不推荐的方法。已经被setAttribute(String attribute, Object Value)替代
Object getValue(String attribute)	不被推荐的方法。已经被getAttribute(String attr)替代
boolean isNew()	返回该Session是否是新创建的
void invalidate()	使该Session失效

更详细的介绍参考博文：https://blog.csdn.net/gaoyong_stone/article/details/79524321