springmvc +axios实现跨域

约定不等于承诺〃 2023-06-14 14:57 10阅读 0赞

直接码上，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>
        
        
    </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:

对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][ruanyifeng]

[ruanyifeng]: https://www.ruanyifeng.com/blog/2016/04/cors.html