Vue项目用的axios发送请求
在main.js中增长如下配置:ios
import axios from 'axios'; axios.defaults.withCredentials=true;
使用时,设置withCredentials: true(请求时携带凭证信息)axios
axios({ url: url, data: data, headers: { 'Content-Type': 'multipart/form-data' }, method: 'POST', withCredentials: true }).then(response => { resolve(response) }
服务端添加filter跨域
private final List<String> allowedOrigins = Arrays.asList("http://localhost:8089","http://localhost:8088");// 容许跨域的地址 @Override public void init(FilterConfig filterConfig) throws ServletException {} @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; HttpServletRequest request = (HttpServletRequest) servletRequest; response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Accept, Content-Type"); response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH"); String origin = request.getHeader("Origin"); response.setHeader("Access-Control-Allow-Origin", allowedOrigins.contains(origin) ? origin : ""); // 是否容许浏览器携带用户身份信息(cookie) response.setHeader("Access-Control-Allow-Credentials","true"); // 图片上传会用到 if( "OPTIONS".equals(request.getMethod())){ } filterChain.doFilter(servletRequest, servletResponse); }
方法中有一行if( "OPTIONS".equals(request.getMethod()))
的判断,是由于我在作图片上传时,登陆认证会失效致使跳转到登陆页。
后来发现缘由是在作图片上传时,会在POST请求以前,先发送一个OPTION的预请求,这个请求的做用主要是 获取服务器支持的HTTP请求方法,用来检查服务器的性能或判断后续请求是否安全。。
若是是OPTIONS请求,不会执行filterChain.doFilter(servletRequest, servletResponse),以致于以后的shiro校验不生效,因此会没有权限。浏览器