如何解决SpringBoot与Vue前后端分离中的跨域登录难题？

本文共计597个文字，预计阅读时间需要3分钟。

前后端分离开发中，通常会遇到请求跨域问题和登录失效问题。今天以Spring Boot和Vue为例，来看如何解决这些问题。

解决跨域问题：

1. 在Spring Boot中，可以通过添加过滤器（Filter）来处理跨域请求。

2.创建一个名为`CorsFilter`的类，实现`Filter`接口。

java

@WebFilter@Componentpublic class CorsFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res=(HttpServletResponse) response; res.setHeader(Access-Control-Allow-Origin, *); res.setHeader(Access-Control-Allow-Methods, POST, GET, PUT, DELETE, OPTIONS); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization, x-requested-with); chain.doFilter(request, response); }}

解决登录失效问题：

1. 在Vue项目中，可以通过添加过滤器来处理登录失效的请求。

2.在`axios`请求中添加拦截器，拦截到登录失效的响应后，进行相应的处理，如跳转到登录页面。

javascript

import axios from 'axios';

axios.interceptors.response.use(response=> { return response;}, error=> { if (error.response && error.response.status===401) { // 登录失效，跳转到登录页面 window.location.href='/login'; } return Promise.reject(error);});

以上代码分别解决了前后端分离开发中的跨域请求和登录失效问题。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。