In order to support the direct request of web browser ajax, project development involves cross-domain requirements. Through learning, we have a more in-depth understanding of cross-domain. Now let's sum up:

1. Cross-domain description

Cross-domain refers to the inconsistency between the domain of requests and services, the impact of browsers and H5 ajax requests, and no restrictions on http requests between servers.
Cross-domain is that the browser intercepts the corresponding return from the server, not the request.

2. Service-side cross-domain support

There are two main ways of cross-domain support on the server side:
1. Setting the Header property of response

 response.setHeader("Access-Control-Allow-Origin", "*");//Domains that allow cross-domain access can be wildcards "*";
 response.setHeader("Access-Control-Allow-Methods", "POST, GET");
 response.setHeader("Access-Control-Max-Age", "1800");
 response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
 response.setHeader("Access-Control-Allow-Credentials", "true");

Note: Access-Control-Allow-Origin initially thought that a list of domains could be maintained, separated by commas, which was not found in later tests. Later, it was found in an article that only one domain was allowed to be configured. If multiple domains were to be implemented, a list of domains could be maintained to match the domain in the request. If the matching was successful, the cross-domain was set to the current domain.

2. Implementing cross-domain through jsonp
  Using jsonp to achieve cross-domain can solve the problem of not cross-domain under ie
  The server adds an additional parameter called back, which wraps the specific data packet in the callback when returning the data and returns it to the front end.
  Example: The parameter value of callback in the request is jsonpcallback, and the return data is {code":0,"message":"ok"}.
     The data returned to the front end should be jsonpcallback({"code":0,"message":"ok"})

3. Implementation of Setting response's Header Attribute

1.springboot implementation (newer version support)
1.1 Method Level
 Annotation @CrossOrigin supports method-level cross-domain, supports multiple different domains, and has not been tested

@CrossOrigin(origins="http://xxx.com.cn",allowCredentials="false",maxAge=3600)

1.2 Application Level

@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {
    /**
     * Cross-domain support
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowCredentials(false).maxAge(3600);
    }
}

2. Use response directly for processing

 response.setHeader("Access-Control-Allow-Origin", "*");//Domains that allow cross-domain access can be wildcards "*";
 response.setHeader("Access-Control-Allow-Methods", "POST, GET");
 response.setHeader("Access-Control-Max-Age", "1800");
 response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
 response.setHeader("Access-Control-Allow-Credentials", "true");

4. Implementation of jsonp

1. When client sends ajax request, set data type to jsonp
 2. Server-side processing
 (1) Write a method to implement the interface MethodInterceptor and rewrite the invoke method

String callback = request.getParameter("callback");
if(StringUtils.isNotBlank(callback)){
   Object ret = invocation.proceed();
   return callback+"("+ret+")";
}else{
   Object ret = invocation.proceed();
   return ret;
}

(2) Implementation using JSONPObject of fastjson

   JSONPObject ret = new JSONPObject(callback);
   ret.addParameter(data);
   //Callback is the value of the parameter callback
   //addParameter is the data to be returned
   //Call toJSONString to see the result

Note: The first time to write a technical blog, if there are errors, please correct and make progress together.