Homology strategy

Browsers have homology policy restrictions. The same origin policy is a kind of convention. It is the core and basic security function of the browser. If the same origin policy is missing, the normal functions of the browser may be affected.

The same origin policy prevents JavaScript scripts in one domain from interacting with the content of another domain. It is simply understood that js under a.com domain name cannot operate objects under b.com or c.a.com domain name due to the restriction of JavaScript homology policy.

Homology and cross domain

Homology means that two pages in the same domain have the same protocol, host and port number.

When the protocol, subdomain name, primary domain name and port number are different, they are counted as different domains. If different domains request resources from each other, it is regarded as "cross domain".

When calling across domains, the following error occurs:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access. The response had HTTP status code 400.

Introduction to CORS

CORS is a W3C standard, whose full name is "cross origin resource sharing". CORS requires both browser and server support.

CORS allows browsers to issue XMLHttpRequest requests to cross source servers, thus overcoming the limitation that AJAX can only be used from the same source.

In the process of CORS communication, the browser automatically completes it. There is no difference between CORS communication and homologous AJAX communication. Once the browser finds that AJAX requests cross the source, it will automatically add some additional header information, and sometimes an additional request (pre request) will be added. Therefore, the key to realize CORS communication lies in the server. As long as the server implements CORS interface, it can communicate across sources.

Solve cross domain

1. Annotation driven

use@CrossOrigin Annotation, which has the following properties:

attribute	meaning
value	Specifies the collection of supported domains, which means that all domains are supported. The default value is. These values correspond to access control allow origin in the HTTP request header
origins	Same value
allowedHeaders	Allow headers in the request header. All headers are supported by default
exposedHeaders	The allowed header in the response header is empty by default
methods	The methods that support requests, such as GET, POST, PUT, etc., are consistent with those marked on the methods in the Controller by default.
allowCredentials	Whether to allow cookie s to be sent with requests. When using, you must specify a specific domain
maxAge	The validity period of the result of the pre request, which is 30 minutes by default

use CORS To achieve cross domain, just add one @CrossOrigin Annotation, which can be marked on methods or classes.

@CrossOrigin
public class testController{

}

2. Interface based programming

Use interface programming for unified configuration. Create configuration class implementation WebMvcConfigurer，rewrite addCorsMappings It can be implemented by default

@Configuration
public class WebConfigurer implements WebMvcConfigurer {

     @Override
     public void addCorsMappings(CorsRegistry registry) {
         // Add mapping path for url
         registry.addMapping("/**")
                 // Set allowed domains
                 .allowedOrigins("*")
                 // Set how requests are allowed
                 .allowedMethods("*")
                 // Set allowed header s
                 .allowedHeaders("*")
                 // Set whether to send cookie information
                 .allowCredentials(true);

     }
}

3. Filter based

Create a CorsConfig Configuration class, which realizes global cross domain configuration based on filter.

@Configuration
public class CorsConfig {

    public CorsConfig() {
    }

    @Bean
    public CorsFilter corsFilter() {
        // 1. Add cors configuration information
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:8080");
       	config.addAllowedOrigin("http://localhost:8081");
        config.addAllowedOrigin("http://localhost:8082");
        config.addAllowedOrigin("*");

        // Set whether to send cookie information
        config.setAllowCredentials(true);

        // Set how requests are allowed
        config.addAllowedMethod("*");

        // Set allowed header s
        config.addAllowedHeader("*");

        // 2. Add a mapping path for the url
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);

        // 3. Return to the redefined corsSource
        return new CorsFilter(corsSource);
    }
}

4. Microservice based gateway configuration

spring.cloud.gateway.routes[1].id=system
#spring.cloud.gateway.routes[1].uri=http://127.0.0.1:8888
spring.cloud.gateway.routes[1].uri=lb://system
spring.cloud.gateway.routes[1].predicates[0].name=Path
spring.cloud.gateway.routes[1].predicates[0].args[0]=/system/**

import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;

	/**
	 * Configure cross domain
	 * @return
	 */
	@Bean
	public CorsWebFilter corsFilter() {
		CorsConfiguration config = new CorsConfiguration();

		config.setAllowCredentials(Boolean.TRUE);
		config.addAllowedMethod("*");
		config.addAllowedOrigin("*");
		config.addAllowedHeader("*");
		config.setMaxAge(3600L);

		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
		source.registerCorsConfiguration("/**", config);

		return new CorsWebFilter(source);
	}