Summary of cross-domain problems in front-end and back-end development

1. What is a cross-domain problem

Due to the browser's same-origin policy restrictions. The same-origin policy is a convention, which is the core and most basic security function of the browser. If the same-origin policy is missing, the normal functions of the browser cannot be used. It can be said that the web is built on the basis of the same-origin policy, and the browser is only an implementation of the same-origin policy. The same-origin policy prevents javascript scripts from one domain from interacting with content from another domain. The so-called same origin (that is, in the same domain) means that two pages have the same protocol, host and port number

When any of the protocol, domain name, and port of a request url is inconsistent with the current page url, that is, cross-domain

current page url	The requested page url	Whether cross-domain	reason
http://www.a.com	http:www.a.con/index.html	no cross domain	Same origin (same protocol, domain name, port)
http://www.a.com	https://www.a.com	cross domain	agreement is different
http://www.a.com	http:www.b.com	cross domain	Primary domain name is different
http://www.a.com	http://org.a.com	cross domain	different subdomains
http://www.a.com:8080	http://www.a.com:8081	cross domain	different port numbers

 2. Restrictions of the same-origin policy:

1. Unable to read cookies, LocalStorage and IndexedDB of non-same-origin web pages

2. Unable to access the DOM of non-same-origin web pages

3. Unable to send AJAX requests to non-same-origin addresses

3. Solve cross-domain problems

1. jsonp front-end solution

Baidu

2、springboot CorsFilter

@Configuration
public class CorsConfig {
 
	public CorsConfig() {
 
	}
 
	@Bean
	public CorsFilter corsFilter() {
		// 1. 添加cors配置信息
		CorsConfiguration config = new CorsConfiguration();
 
		// 设置允许所有请求
		config.addAllowedOrigin("*");
 
		// 设置允许请求的方式
		config.addAllowedMethod("*");
 
		// 设置允许的header
		config.addAllowedHeader("*");
 
		// 设置是否发送cookie信息
		config.setAllowCredentials(true);
 
		// 2. 为url添加映射路径
		UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
		corsSource.registerCorsConfiguration("/**", config);
		// 3. 返回重新定义好的corsSource
		return new CorsFilter(corsSource);
 
	}
 
}

3. nginx configuration

server {
        listen       89;
        server_name  localhost;
 
        # 允许跨域请求的域，*代表所有
        add_header 'Access-Control-Allow-Origin' *;
        # 允许带上cookie请求
        add_header 'Access-Control-Allow-Credentials' 'true';
        # 允许请求的方法，比如 GET/POST/PUT/DELETE
        add_header 'Access-Control-Allow-Methods' *;
        # 允许请求的header
        add_header 'Access-Control-Allow-Headers' *;
 
        location / {
            root   html;
            index  test.html;
        }
 
 
 
    }

4. webpack local proxy

proxy: {
   '/api/v1': {
    target: "http://xx.x.x.xxx:8080",
    pathRewrite: {
     '^/api/v1': ''
    },
        secure: false,
        changeOrigin: true,
        logLevel: "debug"
     }
    }

This is often encountered in the local development process, and cross-domain is completed by node.js

5、websocket

Websocket is a persistent protocol of HTML5, which realizes full-duplex communication between browser and server, and is also a cross-domain solution. Both websocket and http are application layer protocols, both based on the TCP protocol. However, websocket is a two-way communication protocol. After the connection is established, both the websocket server and the client can actively send or receive data to each other. At the same time, websocket needs to use the http protocol when establishing a connection. After the connection is established, the two-way communication between the client and the server has nothing to do with http.

Note: http protocol websites cannot nest http protocol pages