首页 > 技术文章 > springmvc+shiro+vue跨域问题

caihonghai 2021-10-04 15:25 原文

网上找到的解决方案都不太可行,自己研究出来一个,记录下

vue端设置:

import axios from 'axios'


const service = axios.create({
  timeout: process.env.TIME_OUT
})

service.interceptors.request.use(
  config => {
    //这个必须带上,否则session丢失
    config.withCredentials = true
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

后台设置:

web.xml 新增过滤器

    <filter>
        <filter-name>crossFilter</filter-name>
        <filter-class>com.hxh.shiro.AllowOriginFilter</filter-class>
        <async-supported>true</async-supported>
    </filter>
    <filter-mapping>
        <filter-name>crossFilter</filter-name>
        <url-pattern>*.action</url-pattern>
    </filter-mapping>
AllowOriginFilter:注意跨域范围不能为 * 
package com.hxh.shiro;
/**
 * ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥
 * &  | |      | |   * *     * *   | |      | |  &
 * &  | |      | |    * *   * *    | |      | |  &
 * &  | -------- |     * * * *     | -------- |  &
 * &  | -------- |      *   *      | -------- |  &
 * &  | |      | |     * * * *     | |      | |  &
 * &  | |      | |    * *   * *    | |      | |  &
 * &  | |      | |  * *       * *  | |      | |  &
 * $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 */

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * @Auther: HXH
 * @Date: 2021/10/4 13:33
 * @Description:
 */
@Component
public class AllowOriginFilter implements Filter {

    @SuppressWarnings("unused")
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
       // 设置允许所有跨域访问,不能设置为*,否则前端会报错
        response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8081"); 
        response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested- With,Content-Type,Accept,Authorization,token");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
    }

    public void destroy() {
    }


}

推荐阅读