Vue+SpringBoot+Shiro跨域问题的解决方法

问题背景

Vue+SpringBoot+Shiro是一种常用的前后端分离开发架构，其中Vue用于构建前端界面，SpringBoot提供后端服务，而Shiro用于实现权限控制。然而，在使用这种架构时常常会遇到跨域问题，即前端请求后端接口时的跨域访问限制。本文将介绍如何解决Vue+SpringBoot+Shiro跨域问题。

解决方法

为了解决跨域问题，我们需要采取以下步骤：

步骤一：前端设置

在Vue项目中，可以通过配置vue.config.js文件来设置跨域访问。在这个文件中，我们可以设置代理来转发请求，将前端的请求转发到后端接口。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true
      }
    }
  }
};

步骤二：后端设置

在SpringBoot中，我们可以通过配置WebMvcConfigurer来设置跨域访问。在这个配置类中，我们可以指定允许跨域的源、方法和头信息。

@Configuration
public class WebConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins("*")
        .allowedMethods("GET", "POST", "PUT", "DELETE")
        .allowedHeaders("*")
        .allowCredentials(true)
        .maxAge(3600);
  }
}

步骤三：Shiro设置

在Shiro中，我们需要配置Filter来处理跨域请求。我们可以定义一个继承自org.apache.shiro.web.filter.authc.FormAuthenticationFilter的自定义过滤器，并在shiro.ini配置文件中进行相应的设置。

public class CORSAuthenticationFilter extends FormAuthenticationFilter {
  @Override
  protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
    if (request instanceof HttpServletRequest) {
      HttpServletRequest httpServletRequest = (HttpServletRequest) request;
      HttpServletResponse httpServletResponse = (HttpServletResponse) response;
      httpServletResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("Origin"));
      httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
      httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
      httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
      httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
    }
    return super.isAccessAllowed(request, response, mappedValue);
  }
}

总结

通过前端配置代理、后端配置跨域访问、Shiro配置过滤器，我们可以解决Vue+SpringBoot+Shiro跨域问题。这种解决方案可以确保前端请求能够正常访问后端接口，同时保证了接口的安全性。