springmvc +axios實現跨域

直接碼上，Filter過濾器實現：

public class CorsFilter implements Filter {
	 private String allowOrigin;
	    private String allowMethods;
	    private String allowCredentials;
	    private String allowHeaders;
        //自定義頭
	    private String exposeHeaders;

	    @Override
	    public void init(FilterConfig filterConfig) throws ServletException {
	        allowOrigin = filterConfig.getInitParameter("allowOrigin");
	        allowMethods = filterConfig.getInitParameter("allowMethods");
	        allowCredentials = filterConfig.getInitParameter("allowCredentials");
	        allowHeaders = filterConfig.getInitParameter("allowHeaders");
	        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
	    }

	    @Override
	    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
	        HttpServletRequest request = (HttpServletRequest) req;
	        HttpServletResponse response = (HttpServletResponse) res;
	 
	        if (StringUtil.isNotEmpty(allowOrigin)) {
	            List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
	            if (CollectionUtil.isNotEmpty(allowOriginList)) {
	                String currentOrigin = request.getHeader("Origin");
	                response.setHeader("Access-Control-Allow-Origin", currentOrigin);
	                
	            }
	        }
	        if (StringUtil.isNotEmpty(allowMethods)) {
	            response.setHeader("Access-Control-Allow-Methods", allowMethods);
	        }
	        if (StringUtil.isNotEmpty(allowCredentials)) {
	            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
	        }
	        if (StringUtil.isNotEmpty(allowHeaders)) {
	            response.setHeader("Access-Control-Allow-Headers", allowHeaders);
	        }
	        if (StringUtil.isNotEmpty(exposeHeaders)) {
	            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
	        }
	        
	        chain.doFilter(req, res);
	    }

	    @Override
	    public void destroy() {
	    }

}

 web.xml配置：

  <!-- 跨域過濾器 -->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>harmoleap.filter.CorsFilter</filter-class>
    <init-param>
        <param-name>allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>allowMethods</param-name>
        <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
    </init-param>
    <init-param>
        <param-name>allowCredentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>allowHeaders</param-name>
        <param-value>Content-Type,X-Token,access-control-allow-origin,x-requested-with</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>corsFilter</filter-name>
    <!-- 匹配所有請求 -->
    <url-pattern>/*</url-pattern>
    <!-- 多個路徑設置方式 請根據自己項目修改 -->
    <!-- <url-pattern>/first/f1/*</url-pattern>
    <url-pattern>/secend/s2/*</url-pattern>
    <url-pattern>/three/t3/*</url-pattern>  -->
</filter-mapping>

CollectionUtil 與StringUtil工具類，注：可以使用工具其他工具包，或者自己判斷：

public final class CollectionUtil {

    /**
     * 判斷 Collection 是否爲空
     */
    public static boolean isEmpty(Collection<?> collection) {
        return CollectionUtils.isEmpty(collection);
    }

    /**
     * 判斷 Collection 是否非空
     */
    public static boolean isNotEmpty(Collection<?> collection) {
        return !isEmpty(collection);
    }

    /**
     * 判斷 Map 是否爲空
     */
    public static boolean isEmpty(Map<?, ?> map) {
        return MapUtils.isEmpty(map);
    }

    /**
     * 判斷 Map 是否非空
     */
    public static boolean isNotEmpty(Map<?, ?> map) {
        return !isEmpty(map);
    }

    /**
     * Collection 轉 Array
     */
    public static <T> T[] toArray(Collection<T> collection, T[] array) {
        if (isEmpty(collection)) {
            return array;
        }
        return collection.toArray(array);
    }
}

StringUtil:

import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.math.NumberUtils;

public final class StringUtil {

    /**
     * 判斷字符串是否爲空
     */
    public static boolean isEmpty(String str) {
        if (str != null) {
            str = str.trim();
        }
        return StringUtils.isEmpty(str);
    }

    /**
     * 判斷字符串是否非空
     */
    public static boolean isNotEmpty(String str) {
        return !isEmpty(str);
    }

    /**
     * 判斷字符串是否爲數字
     */
    public static boolean isNumeric(String str) {
        return NumberUtils.isDigits(str);
    }

    /**
     * 正向查找指定字符串
     */
    public static int indexOf(String str, String searchStr, boolean ignoreCase) {
        if (ignoreCase) {
            return StringUtils.indexOfIgnoreCase(str, searchStr);
        } else {
            return str.indexOf(searchStr);
        }
    }

    /**
     * 反向查找指定字符串
     */
    public static int lastIndexOf(String str, String searchStr, boolean ignoreCase) {
        if (ignoreCase) {
            return StringUtils.lastIndexOfIgnoreCase(str, searchStr);
        } else {
            return str.lastIndexOf(searchStr);
        }
    }
}

後臺代碼編寫完畢

 

前端使用axios代替ajax,好處自行百度瞭解一下====

js 的CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"></script>

對axios的簡單封裝,以下代碼作爲測試用：

  $(function(){
const http = axios.create({
                timeout: 1000 * 30,
                withCredentials: true,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json;charset=UTF-8',
                    'Access-Control-Allow-Origin': '*'
                }
            })
            /**
             * 請求攔截
             */
            http.interceptors.request.use(config => {
                config.headers['X-Token'] = 'xxxx' //請求頭帶上token 如果不需要請註釋掉             
                                                    
                return config
            }, error => {
                return Promise.reject(error)
            })

            /**
             * 響應攔截
             */
            http.interceptors.response.use(response => {
                if (response.data && response.data.code === 401) { // 401, token失效
                   
                    //清除登錄信息 根據業務自己實現
                 // 跳轉到登錄頁面進行登錄 根據業務自己實現               }
                return response
            }, error => {
                return Promise.reject(error)
            })

            /**
             * 請求地址處理
             * @param {*} actionName action方法名稱
             */
            http.adornUrl = (actionName) => {
                // 將xxx 端口 替換爲自己的域名或者ip!
                return ('http://xxx.xx.x.x:8080') + actionName
            }
            /**
             * get請求參數處理
             * @param {*} params 參數對象
             * @param {*} openDefultParams 是否開啓默認參數?
              * _.merge 是lodash.js中的方法，具體請參考官網
             */
            http.adornParams = (params = {}, openDefultParams = true) => {
                var defaults = {
                    't': new Date().getTime()
                }
                return openDefultParams ? _.merge(defaults, params) : params
            }
            //具體使用如下：
            http({
                url: http.adornUrl('/xxx/xxx/user/1'),
                method: 'get',
                //設置參數
                params: http.adornParams({
                    'page': 1
                })
            }).then(({data}) => {
                //輸出結果
                console.log(data);
               
            })
})

想對跨域有更深的瞭解，請參考ruanyifeng的博客：https://www.ruanyifeng.com/blog/2016/04/cors.html