vue-element-admin跟springboot+shiro部署爬坑记

今天把前端采用vue-element-admin与springboot的项目部署到正是线上，在开发线上很OK的，一放上去我的天啊，坑是真的多阿。下面听我一一道来：我这边采用的是nginx服务器部署。

1.首页能显示，F5强刷新页面404空白页。

location / {
        index  index.php index.html index.htm;
 　　　　try_files $uri $uri/ /index.html;
      }

2.接口出现返回405，404，403错误

1。去掉vue.config.js中的
// proxy: {
    //   // change xxx-api/login => mock/login
    //   // detail: https://cli.vuejs.org/config/#devserver-proxy
    //   [process.env.VUE_APP_BASE_API]: {
    //     target: `http://127.0.0.1:7081/callcenter-api`,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       ['^' + process.env.VUE_APP_BASE_API]: ''
    //     }
    //   }
    // },

    //after: require('./mock/mock-server.js')
2。修改.env.development和.env.production中的 VUE_APP_BASE_API改为自己的api路径

VUE_APP_BASE_API = 'http://127.0.0.1:7081/callcenter-api'//

3.出现跨域的问题

　　自定义header头的时候，跨域请求有一个前置请求,method类型OPTIONS。该请求会被shiro拦截，故而应该统统放行。

配置过滤器 
private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
        corsConfiguration.addAllowedOrigin(CorsConfiguration.ALL); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL); // 2允许任何头
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL); // 3允许任何方法（post、get等）
        corsConfiguration.addExposedHeader("x-token");/*暴露哪些头部信息 不能用*因为跨域访问默认不能获取全部头部信息*/
        corsConfiguration.addExposedHeader("Authorization");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
 
   }

继承 FormAuthenticationFilter 重写 isAccessAllowed

@Override
    protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
        if (request instanceof HttpServletRequest) {
            if (((HttpServletRequest) request).getMethod().toUpperCase().equals("OPTIONS")) {
                return true;
            }
        }
        return super.isAccessAllowed(request, response, mappedValue);
    }

注：登录失效后出现跨域的问题，则需要在响应时加入跨域

 @Override
    protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
        if (request instanceof HttpServletRequest) {
            if (((HttpServletRequest) request).getMethod().toUpperCase().equals("OPTIONS")) {
                return true;
            }
        }
        return super.isAccessAllowed(request, response, mappedValue);
    }

    @Override
    protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {
        if (this.isLoginRequest(request, response)) {
                return true;
        } else {
            HttpServletResponse res = (HttpServletResponse)response;
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setStatus(HttpServletResponse.SC_OK);
            res.setCharacterEncoding("UTF-8");
            JSONObject json = new JSONObject(R.error(STCode.TOKEN_ILLEGAL_CODE,STCode.TOKEN_ILLEGAL_MSG));
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            out.println(json);
            out.flush();
            out.close();
            return false;
        }
    }

4.点击导航菜单连接显示正确，按F5刷新页面空白并且报错。

路径问题；将vue.config.js中的 publicPath: '/',即可。打包时需要使用相对路径来处理静态资源

来源：oschina

链接：https://my.oschina.net/u/4311359/blog/3356966

标签

Vue.js

javascript

Spring Boot

shiro

vue-element-admin