I am very sorry. Later, I found that the problem caused by the front-end axios request was not a cross-domain problem in the real sense. I followed the way axios sent the request on the Internet, and later found that there was something wrong with the axios request in that article and could not send the request correctly. Therefore, the cross-domain problem handled from the backend is valid

nginx or if you use webpack, you can match it with proxy and act as an agent.

implement a filter.

@Component
public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
            ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        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");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {

    }

    public void destroy() {

    }

}

reference: https://www.jianshu.com/p/daf...

use the devServer option provided by webpack to configure the br. For example, the access to the
frontend project is http://127.0.0.1:8080
backend address: http://127.0.0.1:3000

if the backend now has an interface to look up the user user , the address is http://127.0.0.1:3000/user
, which will cause cross-domain problems due to different ports, so how to solve this problem?

if the front-end request method is as follows:

  axios.post('/api/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

when sending a post request, the complete request address is http://127.0.0.1:8080/api/user. First, we need to add a api prefix. Here, not all requests need to be intercepted because we need to distinguish which interfaces need to be proxied. For example, css,js,image

webpack the configuration code is as follows:

module.exports = {
  devServer: {
    proxy: { 
      '/api': 'http://127.0.0.1:3000'
      //  path 
      pathRewrite: {    
          '^/api': ''   //  '/api/user'  '/user'
      }
    }
  }
};

Note: pathRewrite is used here to rewrite the path address;
before adding the pathRewrite option, the agent forwards the full path as http://127.0.0.1:3000/api/user,. Obviously, this does not conform to our backend request address.
after adding pathRewrite option, get the correct request address http://127.0.0.1:3000/user.