zoukankan      html  css  js  c++  java
  • 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);
        }

    至此问题解决。

  • 相关阅读:
    条形码校验码生成
    js 模仿块级作用域(私有作用域)、私有变量
    js 闭包
    js 继承
    javascript 创建对象
    jQuery.noConflict() 函数
    C#对话框-打开和保存对话框(转)
    String.format()的用法
    转:WPF中ListBox的创建和多种绑定用法
    在wpf或winform关闭子窗口或对子窗口进行某个操作后刷新父窗口
  • 原文地址:https://www.cnblogs.com/StarChen20/p/14053504.html
Copyright © 2011-2022 走看看