vue+Java 先後端分離,屢次請求Session不一致的問題

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校驗不生效,因此會沒有權限。瀏覽器

相關文章
相關標籤/搜索