当前位置：网站首页>Cross domain and processing cross domain

Cross domain and processing cross domain

2022-07-27 09:07:00 【Masike 1024】

One 、 Cross domain concept

Before discussing cross domain , Let's start with what is ： The same-origin policy .
Look at this URL Address ：
Insert picture description here
The URL from ： agreement ,IP, port And so on , If his agreement ,IP And port 3 If they are all the same, we can call them homologous , One difference is not homologous , namely ： Cross domain , That is, cross domain access , This is not allowed by default . Then why are there homologous strategies ？ Mainly browser pair JavaScript A security restriction imposed , Prevent cross station execution JS Scripts cause security problems .

Look at a group URL Do an exercise ：

URL1	URL2	Cross domain or not
http://localhost:8080	https://localhost:8080	Cross domain （ The agreement is inconsistent ）
http://176.198.100.1:8080	http://176.198.100.2:8080	Cross domain （ip atypism ）
http://localhost:8080	http://localhost:80	Cross domain （ Port inconsistency ）
http://localhost:8080/index	http://localhost:8080/test	Homology
http://www.jd.com	http://img.jd.com	Cross domain （ The parent domain name is the same , Different subdomains ）
http://www.baidu.com	http://14.215.177.38, Suppose Baidu ip Namely 14.215.177.38	Cross domain （ Domain access ip Also cross domain ）
http://localhost:8080	http://127.0.0.1:8080	Cross domain

Two 、 To deal with cross domain

Know what cross domain is , How to deal with cross domain ？ After all, we do use it in our usual development JS send out ajax Make cross domain requests .

1.jsonp To deal with cross domain

Older technology , The essence is to use script label Of src attribute Send the request when it comes , because src Attributes can be accessed across domains . The following is a code case ：

service 1（ port 80）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP test </title>
</head>
<body>
	<h1> Test cross domain </h1>
	<script> function test(data){
       console.log(data) } </script>
	<script src="http://localhost:8090/jsonp?methodName=test"></script> 
    <!--  The script After the tag request, the server returns : test(123), and script The returned results will be executed as scripts .  amount to ：<script> test(123) </script> , there test() Called a callback function   The server can also send back the data you want to return .  Through this script Tags implement cross domain requests to obtain data from the server . -->
</body>
</html>

service 2（ port 8090）：

@RestController
public class JsonpController {
    
	@RequestMapping("/jsonp")
	public String testJsonp(String methodName) {
    
        //data  Return data for simulation 
        int data = 123;
		return methodName+"("+data+")"; 
	}
}

2.CORS To deal with cross domain （ recommend ）

CORS It's cross domain resource sharing （Cross-Origin Resource Sharing） Abbreviation . It is W3C standard , It belongs to cross source AJAX The fundamental solution to the request .

CORS Dealing with cross domain code is simple , Just set up on the server side Access-Control-Allow-Origin that will do . If the browser detects the corresponding settings , You can allow Ajax Cross domain access .

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter() {
    
        //1. add to CORS Configuration information 
        CorsConfiguration config = new CorsConfiguration();
        //1)  Allowed domains 
        //config.addAllowedOrigin("*"); //* Express all , But this way cookie Can't use 
       	config.addAllowedOrigin("http://127.0.0.1:8090"); // allow http://127.0.0.1:8090 Come visit me 

        //2)  Whether to send Cookie Information 
        config.setAllowCredentials(true);
        
        //3)  Allowed request mode ,* Express all 
        //config.addAllowedMethod("*");
        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 a mapping path , We intercept all requests 
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        
        return new CorsFilter(configSource);
    }
}