详解springboot和vue前后端分离开发跨域登陆问题

前后端分离开发中，一般都会遇到请求跨域问题。而且一般也会遇到登陆失效问题。今天就以springboot和vue为例来看如何解决上述问题

增加过滤器

@WebFilter
@Component
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
System.out.println("**************************跨域过滤器被使用**************************");
chain.doFilter(req, res);
}
}

注意Access-Control-Allow-Origin这个属性不要用 * ，因为用 * 的话是可以解决跨域问题，但是无法解决登陆失效的问题。

axios属性设置

在Vue中使用axios来发送请求，我们增加如下设置

axios.defaults.withCredentials = true;

如果没有配置为true，默认为false则向后台发送的请求当中不携带cookie信息，如此每一次sessionID自然会不同。因此获取不到登陆信息。

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• 解决Vue调用springboot接口403跨域问题
• 解决前后端分离 vue+springboot 跨域 session+cookie失效问题
• springboot vue 跨域问题的解决
• vue+springboot实现项目的CORS跨域请求
• vue+springboot前后端分离实现单点登录跨域问题解决方法