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>