One:
Cross-domain reason explanation example
Different domain names www.jd.com and www.taobao.com
The domain name is the same, the port is different www.jd.com:8080 and www.jd.com:8081
The second-level domain name is different item.jd.com and miaosha.jd.com
two:
Cross-domain issues do not necessarily have cross-domain issues.
Because the cross-domain problem is a security restriction of the browser for Ajax requests: an Ajax request initiated by a page can only be the same path as the domain name of the current page, which can effectively prevent cross-site attacks.
Therefore: the cross-domain problem is a limitation for ajax.
But this has brought inconvenience to our development, and in the actual production environment, there will definitely be interactions between many servers, and the addresses and ports may be different. What should I do?
CORS is a W3C standard, the full name is "Cross-origin resource sharing" (Cross-origin resource sharing).
three:
CORS
Standardized cross-domain request solution, safe and reliable.
Advantage:
Control whether to allow cross-domain on the server side, and customize rules
Support various request methods
Disadvantages:
Will generate additional requests
four:
The browser divides Ajax requests into two categories, and their processing schemes are slightly different: simple requests and special requests.
1. Simple request
As long as the following two conditions are met at the same time, it is a simple request. :
(1) The request method is one of the following three methods:
HEAD、GET、POST
(2) The HTTP header information does not exceed the following fields:
Accept、Accept-Language、Content-Language、Last-Event-ID
Content-Type: Limited to three values: application/x-www-form-urlencoded, multipart/form-data, text/plain
When the browser finds that the initiated ajax request is a simple request, it will carry a field in the request header: Origin.
Fives:
The implementation is very simple, although the principle is more complicated, but I said before:
The browser side has the browser auto-completion, we don’t need to worry about it
The server can be implemented uniformly through interceptors, and it is not necessary to write cross-domain judgments every time.
In fact, SpringMVC has helped us write the CORS cross-domain filter: CorsFilter, which has implemented the judgment logic just mentioned, so we can use it directly.
Write a configuration class in ly-api-gateway and register CorsFilter:
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1. Add CORS configuration information
CorsConfiguration config = new CorsConfiguration();
//1) Allowed domains, do not write *, otherwise the cookie will not be available
config.addAllowedOrigin("http://manage.leyou.com");
//2) Whether to send cookie information
config.setAllowCredentials(true);
//3) Allowed request methods
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4) Allowed header information
config.addAllowedHeader("*");
//2. Add the mapping path, we intercept all requests
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3. Return the new CorsFilter.
return new CorsFilter(configSource);
}
}
Supplement: Five steps of Ajax request
1. Create an XMLHttpRequest asynchronous object
2. Set the callback function
3. Use the open method to establish a connection with the server
4. Send data to the server
5. In the callback function, handle different response states