关于解决vue.js跨域请求极简实现（后端）

简介

前后端分离已经是被越来越多公司在使用的一种开发模式了，拆分后的前端可以更多专注于页面布局及数据渲染等专职工作，后端则提供API接口即可。目前我们在使用的是vue.js前后端分离。后端解决跨域的时候，也有多种方式，比如使用过滤器，拦截器都可以实现功能。以下分别Sping mvc项目与spring boot项目介绍代码实现。

Spring mvc 项目（过滤器实现）

一、编写过滤器 WebCORSFilter


public class WebCORSFilter implements Filter {

    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain chain) throws IOException, ServletException {
         //加载配置项
        ParamProperties paramProperties = SpringContextUtils.getBean(ParamProperties.class);
        HttpServletResponse response = (HttpServletResponse) res;
        //paramProperties.accessControlAllowOrigin 为配置项中的值，也就是指定合法请求域，如果没有限制，可以配置为 * ，如果需要限制则配置为指定环境的IP或者域名
        response.addHeader("Access-Control-Allow-Origin", paramProperties.accessControlAllowOrigin);
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }
}

二、web.xml中配置过滤器

    <!--com.demo.core.filter.WebCORSFilter为过滤器实现类路径-->
    <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.demo.core.filter.WebCORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

注意
Spring MVC 4.2以上才增加的CORS 支持，处理跨域请求问题。

Spring Boot 项目（拦截器实现）

一、编写拦截器 WebAppConfig

//配置类注解
@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {
     //注入配置类  
    @Resource
    private ParamProperties paramProperties
    /**
     * 添加拦截器
     * @param registry
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {

    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**").allowedOrigins(paramProperties.accessControlAllowOrigin);
    }
}

然后就没有然后了！

现代人的生活空间就像包包一样，越来越复杂，拥塞着很多用得到，用不到的东西。包包的原始设计是一格一格的，可以很清楚，有秩序地分类，可是使用到最后，所有的东西还是都混在一起了。 -- 蒋勋《生活十讲》

关于解决vue.js跨域请求极简实现（后端）

推荐阅读更多精彩内容