酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

java

旗下栏目: php js asp Flex Ajax jquery JSP asp.net C语言 java 正则表达式 微信小程序

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-13
本篇文章主要介绍了详解springboot和vue前后端分离开发跨域登陆问题,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

前后端分离开发中,一般都会遇到请求跨域问题。而且一般也会遇到登陆失效问题。今天就以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自然会不同。因此获取不到登陆信息。

原文链接:https://segmentfault.com/a/1190000020359152

最新更新