Vue proxytable Interface Cross domain request problem handling _vue Cross-domain request

1. Preface
When using Vue to develop mobile app, the Vue proxytable interface cross domain request problem occurs when obtaining interface data using HTTP request
2, 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 (' Get basic information exception ');
};

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", "John");
    return map;
}

The Vue newspaper's mistake is as follows:

Failed to load http://127.0.0.1:8080/mobile/?base/getBaseInfo.do:No ' Access-control-allow-origin ' header was present on The requested resource. Origin ' http://localhost:9001 ' is therefore not allowed access.

2. Solution method
Code in front of the processing method in the background

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 such as:

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

After this processing, the Vue front end can receive the request response in the background normally.
3, add filter Unified treatment.
If there are multiple requests, each of the backend method processing to add such a piece of code, very cumbersome, in fact we can write a filter unified processing
Mobilefilter.java

The @WebFilter ("/mobilefilter") @Component the public class Mobilefilter implements Filter {/** * Default constructor. * * Public Mobilefilter () {}/** * @see Filter#destroy ()/public void Destroy () {TODO auto-generated met Hod stub}/** * @see filter#dofilter (servletrequest, Servletresponse, Filterchain) */public void Dofilter (SERVLETR
        Equest 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 Servletexceptio n {}}

The formulation 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>