vue proxyTable 介面跨域請求問題處理_vue跨域請求

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")@Componentpublic 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>