vue proxyTable 接口跨域请求问题处理

1、前言
在使用vue开发移动端app时，使用http请求获取接口数据时，出现vue proxyTable接口跨域请求问题
2、vue http请求代码如下：

this.$http.post(this.URL + '/mobile/base/getBaseInfo.do',{type:1})
  .then(function (res) {
     alert(res.data.name)
})
     .catch(function (error) {
         this.$toast('获取基本信息异常');
});

java后台代码如下：

@ResponseBody
@RequestMapping("/getBaseInfo")
public Map<String,Object> getBaseInfo(Integer type,HttpServletResponse response){
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("name", "张三");
    return map;
}

vue报的错如下：

Failed to load http://127.0.0.1:8080/mobile/base/getBaseInfo.do: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9001' is therefore not allowed access.

2、解决方法
在后台的处理方法前加上代码

response.setHeader("Access-Control-Allow-Origin", "*"); 
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
response.setHeader("Access-Control-Max-Age", "3600"); 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); 
response.setHeader("Access-Control-Allow-Credentials","true");

修改后的后台代码如：

@ResponseBody
@RequestMapping("/getBaseInfo")
public Map<String,Object> getBaseInfo(Integer type,HttpServletResponse response){
    response.setHeader("Access-Control-Allow-Origin", "*"); 
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
response.setHeader("Access-Control-Max-Age", "3600"); 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); 
response.setHeader("Access-Control-Allow-Credentials","true");

    Map<String,Object> map = new HashMap<String,Object>();
    map.put("name", "张三");
    return map;
}

这样处理后，vue前端就可以正常接收到后台的请求响应了。
3、添加过滤器统一处理。
如果有多个请求，每一个后台方法处理都添加这样一段代码，很麻烦，实际上我们可以写一个过滤器统一处理
MobileFilter.java

@WebFilter("/MobileFilter")
@Component
public class MobileFilter implements Filter {

/**
  * Default constructor. 
  */
 public MobileFilter() {

 }

/**
  * @see Filter#destroy()
  */
  public void destroy() {
     TODO Auto-generated method stub
  }

/**
  * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
 */
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*"); 
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
        response.setHeader("Access-Control-Max-Age", "3600"); 
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); 
        response.setHeader("Access-Control-Allow-Credentials","true");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    /**
     * @see Filter#init(FilterConfig)
     */
    public void init(FilterConfig fConfig) throws ServletException {

    }

}

filter在web.xml中的配制：

<filter> 
    <filter-name>mobileFilter</filter-name> 
    <filter-class>com.base.filter.MobileFilter</filter-class> 
</filter> 

<filter-mapping> 
      <filter-name>mobileFilter</filter-name> 
      <url-pattern>/mobile/*</url-pattern> 
</filter-mapping>