Cross domain request processing of vue proxyTable interface

Keywords: Vue Mobile Java xml

1. Foreword
When using vue to develop mobile app and using http to request interface data, cross domain request of vue proxyTable interface appears
2. The vue http request code is as follows:

this.$http.post(this.URL + '/mobile/base/getBaseInfo.do',{type:1})
  .then(function (res) {
     alert(res.data.name)
})
     .catch(function (error) {
         this.$toast('Exception in getting basic information');
});

The java background code is as follows:

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

The errors reported by vue are as follows:

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. Solutions
Add code before background processing method

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");

The modified background code is as follows:

@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", "Zhang San");
    return map;
}

After this processing, the front end of the vue can receive the request response from the background normally.
3. Add filter for unified processing.
If there are multiple requests, each background method processing adds such a piece of code, which is troublesome. In fact, we can write a filter for unified processing
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 {

    }

}

Configuration of filter in 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> 

Posted by fighter1430 on Thu, 30 Apr 2020 18:21:42 -0700