前端 React + vite + Typescript 后端 java + springmvc + jwt 跨域 解决方案

首先后端配置跨域：

web.xml文件：

 

    <!--  配置跨域  -->
    <filter>
        <filter-name>header</filter-name>
        <filter-class>org.zhiyi.config.Cross</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>header</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--  配置跨域  -->

 这里注意需要允许认证使用的请求头添加到Access-Control-Allow-Headers 中

public class Cross implements Filter {

    public void destroy() {

    }

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        String originHeader = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", originHeader);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "0");
        response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, authorization, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("XDomainRequestAllowed", "1");
        response.setHeader("XDomainRequestAllowed", "1");
        chain.doFilter(request, response);
    }

    public void init(FilterConfig arg0) throws ServletException {

    }
}

添加jwt配置信息到配置文件中：

token.tokenSecret=5c6095d3-d4b6-4729-a1b7-b8159d8d46ae
token.expireTime=86400000
token.algorithm=HmacSHA256

springmvc读取配置文件：

 注入：

 验证jwt_token以及生成 jwt_token

@Component
public class JWT {

    @Value("${token.tokenSecret}")
    private String tokenSecret;
    @Value("${token.expireTime}")
    private Long expireTime;
    @Value("${token.algorithm}")
    private String algorithm;

    public String genToken(HashMap<String, String> obj) throws NoSuchAlgorithmException, InvalidKeyException {

        long nowMillis = System.currentTimeMillis();
        long expMillis = nowMillis + expireTime;

        String header = "{\"alg\":\"HS256\",\"typ\": \"JWT\"}";
        String headerEncoded
                = Base64.getUrlEncoder()
                .withoutPadding()
                .encodeToString(
                        header.getBytes()
                );

        //向payload中添加数据
        obj.put("exp", expMillis + "");
        String payloadEncoded
                = Base64.getUrlEncoder()
                .withoutPadding()
                .encodeToString(
                        obj.toString().getBytes()
                );

        SecretKeySpec key = new SecretKeySpec(tokenSecret.getBytes(), algorithm);
        Mac mac = Mac.getInstance(algorithm);
        mac.init(key);
        String hp = headerEncoded + "." + payloadEncoded;
        String signatureEncoded
                = Base64.getUrlEncoder()
                .withoutPadding()
                .encodeToString(mac.doFinal(
                                hp.getBytes()
                        )
                );


        return hp + "." + signatureEncoded;
    }

    public HashMap<String, String> analysisToken(String token) throws NoSuchAlgorithmException, InvalidKeyException {
        HashMap<String, String> result = new HashMap<>();

        String[] tokens = token.split(".");

        SecretKeySpec key = new SecretKeySpec(tokenSecret.getBytes(), algorithm);
        Mac mac = Mac.getInstance(algorithm);
        mac.init(key);
        String hp = tokens[0] + "." + tokens[1];
        String signatureEncoded
                = Base64.getUrlEncoder()
                .withoutPadding()
                .encodeToString(mac.doFinal(
                                hp.getBytes()
                        )
                );

        if(signatureEncoded != tokens[2]){
            result.put("msg","verification_failed");
           return result;
        }

        String headerDecoded
                = new String(
                Base64.getUrlDecoder().decode(tokens[0])
        );

        String payloadDecoded
                = new String(
                Base64.getUrlDecoder().decode(tokens[1])
        );

        result.put("header",headerDecoded);
        result.put("payload",payloadDecoded);

        return result;
    }
}

通过登录接口将用户token返回到前端：

 前端将登录成功后将token保存到localStorage中：

前端 添加拦截器 将token放到请求头中：

 后端接收token并添加拦截认证：

 

<!--  拦截 用户登录判断  -->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <bean class="org.zhiyi.config.Interceptor" />
        </mvc:interceptor>
    </mvc:interceptors>
<!--  拦截 用户登录判断  -->