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

最新推荐文章于 2025-05-29 17:34:28 发布

原创最新推荐文章于 2025-05-29 17:34:28 发布 · 3.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#session #ajax #前端 #cookie

Java web 同时被 3 个专栏收录

26 篇文章

订阅专栏

javaweb

5 篇文章

订阅专栏

前后端分离

1 篇文章

订阅专栏

本文介绍如何通过CORS实现跨域请求中Session的保持。详细解释了设置withCredentials、Access-Control-Allow-Origin及Access-Control-Allow-Credentials的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开篇

因为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>