Vue+SSM 使用过滤器实现前后端分离,解决seesion失效

后端：创建过滤器：

package com.jhssms.filter;

import org.springframework.core.annotation.Order;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 解决跨域问题
 */
@Order(1)
@WebFilter(filterName = "corsFilter", urlPatterns = {"/*"})
public class CORSFilter implements Filter{

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        // 前端IP+端口或者域名
        response.setHeader("Access-Control-Allow-Origin", "http://192.168.137.67:8080");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

Access-Control-Allow-Origin 地址，不能为*;

Access-Control-Allow-Credentials 一定要true;

 

可以使用127.0.0.1 但不能是localhost ;

web.xml

<!-- 过滤器拦截指定后缀-->
<filter>
    <filter-name>CORSFilters</filter-name>
    <filter-class>com.jhssms.filter.CORSFilter</filter-class>
    <init-param>
        <param-name>contentType</param-name>
        <param-value>text/html;charset=UTF-8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CORSFilters</filter-name>
    <!-- 要拦截的哪一级目录 -->
    <url-pattern>/*</url-pattern>
</filter-mapping>

Vue

main.js 

Axios.defaults.withCredentials = true

 

 

withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

• 默认值为false。
• true：在跨域请求时，会携带用户凭证
• false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookieyc

 

异常：

1.浏览器 抛出：

 

 

A cookie associated with a cross-site resource at http://localhost/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

 

 

 

问题：谷歌浏览器最新版对cookie 安全进行升级，导致如上配置无法实现同一会话；

解决：

1.地址栏：chrome://flags

2.搜索：SameSite by default cookies

3.选择：disabled