前后端分离-跨域会话如何保持?

开篇

因为CORS的出现,大大降低了跨域的难度,另到AJAX有了更大的发挥空间,也导致了前后端更加容易实现。但是今天在实现前后端的时候发现了一个问题。在进行session会话管理的时候,前端无法发送cookie到后端,前端每次访问后端都相当于一次新的会话,这样就导致登录后的信息是无法保存的。客户端每一次访问都需要重新登录。

原因

对于前端来说,seesion字段是存在cookie中的。在跨域过程中,Cookie是默认不发送的。就算后端返回set-Cookie字段,前端也不会保存Cookie,更不会在下一次访问的时候发送到后端了。
因此只要前端可以把cookie发送到后端,后端就可以根据cookie拿到seeion字段进行会话验证。
进过重新对CORS的学习,只要通过3步,就可以让会话保持。

第一步

在ajax中设置,withCredentials: true。
例如:

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

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

第二步

服务端的Access-Control-Allow-Origin 不可以设置为”*”,必须指定明确的、与请求网页一致的域名

第三步

服务端的 Access-Control-Allow-Credentials: true,代表服务器接受Cookie和HTTP认证信息。因为在CORS下,是默认不接受的。

PS:
- 在spring boot 中,可以写一个配置类来实现

@Configuration
public class CORSConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowCredentials(true);
            }
        };
    }
}
  • 在SSM中可以写一个Filter实现。
public class AjaxFilter extends OncePerRequestFilter{  

    @Override  
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)  
            throws ServletException, IOException {  

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); 
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.addHeader("Access-Control-Allow-Credentials", "true");  
        response.setCharacterEncoding("UTF-8");  
        response.setContentType("application/json");  
        //此行代码确保请求可以继续执行至Controller  
        filterChain.doFilter(request, response);   
    }  
}  

web.xml

<filter>  
    <filter-name>ajaxFilter</filter-name>  
    <filter-class>xxxx.AjaxFilter</filter-class><!-- 自定义过滤器 -->  
  </filter>  
  <filter-mapping>  
    <filter-name>ajaxFilter</filter-name>  
    <url-pattern>/*</url-pattern>  
发布了54 篇原创文章 · 获赞 14 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/GG_and_DD/article/details/79661832