Vue项目中axios与Java后台项目的shiro配置跨域解决方案

1.前言

在ssm+vue的项目中，出现了跨域问题，前端一直报错：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin

还有其他的错误没有截到，反正都是Cors相关的跨域问题，找了很久，以此记录以下。

2.前端设置

这里有一个巨坑就是：axios默认是不开启cookie功能的，而且开启cookie功能后，Origin是不允许配置为通配符*的（这个是最大的坑），首先前端配置区别就在于创建axios请求对象时传入启用cookie功能或是全局启用cookie功能。

//全局配置请求头支持cookie 
axios.defaults.withCredentials = true

3.后端设置

shiro用户认证在浏览器cookie中存在JSESSIONID信息，发送请求时，会携带信息。因此，需要前端和后端，都需要设置允许Credentials，必须要设置此项才可以认证。

 response.setHeader("Access-Control-Allow-Credentials", "true");

要记得登录方法使用post请求，后端可以使用@PostMapping，另外跨域时，请求会发送两个，一个OPTION先确认, 再发一个正常的请求，所以也要注意，后端的过滤器如下：

@Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse) servletResponse;
        HttpServletRequest req = (HttpServletRequest) servletRequest;

        // Access-Control-Allow-Origin就是我们需要设置的域名
        // Access-Control-Allow-Headers跨域允许包含的头。
        // Access-Control-Allow-Methods是允许的请求方式
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8083");// *,任何域名
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE,OPTIONS");
        // 允许客户端请求头
        resp.setHeader("Access-Control-Allow-Headers", "*");
        resp.setHeader("Access-Control-Allow-Credentials", "true");
        
        if("OPTIONS".equals(req.getMethod()))
            return;

        filterChain.doFilter(servletRequest, servletResponse);
    }

至此问题解决。

 

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！