Solutions to cross domain problems

introduction

Cross domain problems are usually encountered in projects with front end and back end separation , Cross domain arises because browsers are set up for security The same-origin policy , Only agreement （http/https）、 domain name （www.test.com）、 port （8080/8081…） When the three are the same, cross domain problems will not occur ;

This also explains why there are cross domain problems in projects with front-end and back-end separation , For example, we develop on the same server , Front-end url by ：http://127.0.0.1:3000, And the back end url by ：http://127.0.0.1:8080, Both ports are different. If you visit each other, cross domain problems will certainly occur ;

Pictured ：

front end http://localhost:3000 Send a request back ：http://localhost:8080/api/user/search/tags, But because the port number is different , So the request failed , The error message also shows cross domain policy blocking ：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Now let's share my solutions to cross domain problems ;

resolvent

Here are several ways to solve the above case ;

WebMvcConfig Configuration class cross domain configuration

Cross domain requests can be implemented through custom configuration classes , The specific configuration is as follows ：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
        //  Set the allowed cross domain paths 
        registry.addMapping("/**")
                //  Set the domain name that allows cross domain requests 
                //  When Credentials The certificate is true when ,Origin It can't be an asterisk , It needs to be specific ip Address （ If the interface doesn't have cookie,ip You don't need to be specific ip）
                .allowedOrigins("http://localhost:3000")
                //  Whether to allow certificates   No longer default on 
                .allowCredentials(true)
                //  Set allowed methods 
                .allowedMethods("*")
                //  Cross domain allow time 
                .maxAge(3600);
    }
}

The front end requests from the back end ：

You can see that the request succeeded , And cross domain allowed url The front-end domain name configured for ：http://localhost:3000

annotation @CrossOrigin Achieve cross-domain

This method is much simpler than the above method , Directly on the back end Controller Add this annotation to the class , By default, all cross domain requests are allowed , But it's better to indicate the requested domain name ：

This also enables cross domain access , It's simpler than configuration , But there are drawbacks , The last one says ;

The result is not to show , Same as before ;

GateWay Gateway configuration

The gateway configuration is generally a separate gateway module in the microservice project , Because all requests in microservices must be filtered through the gateway , So the first request is to go to the gateway , We can configure cross domain in the gateway service ：

In the gateway module application.yml Configure cross domain in the configuration file ：

#  Cross domain configuration ：
spring:
  cloud:
    gateway:
      globalcors: #  Global cross domain processing 
        add-to-simple-url-handler-mapping: true #  solve options The request is blocked 
        corsConfigurations:
          '[/**]': #  Set which requests to block ,/** Means to intercept all requests 
            allowedOrigins: #  Allow cross domain requests for which websites  
              - "http://localhost:3000"
            allowedMethods: #  Allowed cross domain ajax Request method of 
              - "GET"
              - "POST"
              - "DELETE"
              - "PUT"
              - "OPTIONS"
            allowedHeaders: "*" #  Header information allowed to be carried in the request 
            allowCredentials: true #  Is it allowed to carry cookie
            maxAge: 360000 #  The validity period of this cross domain detection 

We can also customize the configuration file configuration ：

/** *  Cross domain unified configuration  */
@Configuration
public class CorsConfig {
    
    //  To deal with cross domain 
    @Bean
    public CorsWebFilter corsFilter() {
    
        CorsConfiguration config = new CorsConfiguration();
        //  Allowed request header 
        config.addAllowedMethod("*");
        //  Allowed request sources  （ Such as ：http://localhost:8080）
        config.addAllowedOrigin("http://localhost:3000");
        //  The allowed request method  ==> GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, TRACE
        config.addAllowedHeader("*");
        // URL  mapping  （ Such as ： /admin/**）
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

Both of these methods can realize the cross domain configuration of the gateway ;

summary

In general, three methods to solve cross domain problems are introduced , So how to choose actually ？

• @CrossOrigin annotation ： This method is suitable for individual projects , More flexible , Implement a simple ; every last Controller Cross domain allowed by interface url All very clear. , however Controller It's troublesome when there are many interfaces ;

• WebMvcConfig Configuration class ： This method is suitable for individual projects , And if you feel in every Controller Add @CrossOrigin If annotation is troublesome , You can use this method ;

• GateWay Gateway configuration ： This method is suitable for microservice projects , And the two methods I share are still relatively recommended to use the first method , Directly in application.yml File configuration ;
  One thing to note ： If the gateway is configured with cross domain , then Don't Configure cross domain elsewhere , For example, in Controller add @CrossOrigin annotation , If you cross domains like this, it is equivalent to no configuration , It will fail ;