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: '/',即可。打包時需要使用相對路徑來處理靜態資源