1. What is crossing over?

  • When a web page requests resources from another web page with a different domain name/protocol/port, it is called cross-domain.
  • Cross-domain cause: In the current domain name request website, ajax requests are not allowed to send other domain names by default.

2. Why do cross-domain requests occur?

  • Because browsers use the same origin policy


What is the same origin policy?

  • The same origin policy is a well-known security policy developed by Netscape and now used by all javascript-enabled browsers. The same origin policy is the core and most basic security function of the browser. If the same origin policy is absent, the normal functions of the browser may be affected. The Web is built on the same origin policy, and browsers are just an implementation of the same origin policy.


4. Why do browsers use same-origin policies?

  • To ensure user information security and prevent malicious websites from stealing data, if web pages do not meet the same origin requirements, they cannot:
  • 1. Share cookies, LocalStorage, and IndexDB
  • 2. Get DOM
  • AJAX requests cannot be sent

Non-absoluteness of the same origin strategy:

<script></script>
<img/>
<iframe/>
<link/>
<video/>
<audio/>
Copy the code

Tags such as SRC can load and execute resources from different domains. Same-origin policy for other plug-ins: Third-party plug-ins loaded by the browser, such as Flash, Java applet, Silverlight, and GoogleGears, also have their own same-origin policies. However, these same-origin policies do not belong to the native same-origin policies of the browser. If there is a vulnerability, hackers may exploit it, resulting in XSS attacks

The so-called same-origin refers to that the domain name, network protocol, and port number are the same, but one of the three is different. For example, when you open http://baidu.com in the browser, the browser executes the JavaScript script and finds that the script sends a request to the domain name http://cloud.baidu.com. In this case, the browser reports an inter-domain error.

There are five solutions:

1. Use JSONP at the front end (not recommended)

  • When we normally request JSON data, the server returns a string of JSON data. When we use JSONP mode to request data, the server returns an executable JavaScript code. Jsonp can only pass parameters through urls, so the type of jsonp type can only be get example:


$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', // Different domainstype: 'GET'// jsonp mode only GET is valid data: {'action': 'aaron'
    },
    dataType: 'jsonp'// Data type jsonp:'backfunc'// Specify the name of the callback function, as received by the server, and pass back})Copy the code
  • The entire process of requesting data using the JSONP pattern: The client sends a request specifying an executable function name (here’s what jQuery does: it automatically generates the callback function for you and pulls the data out for the success method to call, instead of passing a callback handle), and the server accepts the backfunc function name. The data is then sent as arguments
  • In the jquery source code, jSONP is implemented by dynamically adding a

2. Background Http request forwarding

  • Forwarding using HttpClinet forwarding (not recommended for simple examples)


try { HttpClient client = HttpClients.createDefault(); HttpGet get = new HttpGet("http://localhost:8080/test"); // Create a get request CloseableHttpResponse Response = httpClient.execute(get); // Perform the get request String mes = Entityutils.toString (Response.getentity ()); // Convert the information from the returned body to the string system.out.println (mes); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }Copy the code

3. Background Configuration of same-origin Cors (recommended)

  • Cross-domain configuration on SpringBoot2.0 with the following code is the perfect way to solve your front-end cross-domain request problems


Cross-domain configuration on SpringBoot2.0 with the following code is the perfect way to solve your front-end cross-domain request problems

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; /** * Implement basic cross-domain request * @author linhongcun ** / @configuration public class CorsConfig {@bean public CorsFiltercorsFilter() { final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); final CorsConfiguration corsConfiguration = new CorsConfiguration(); / * whether to allow the request with authentication information * / corsConfiguration setAllowCredentials (true); / * allows access to the client domain name * / corsConfiguration addAllowedOrigin ("*"); / * allows server access client request header * / corsConfiguration addAllowedHeader ("*"); / * allows access to the method name, GET POST etc. * / corsConfiguration addAllowedMethod ("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/ * *", corsConfiguration);
        returnnew CorsFilter(urlBasedCorsConfigurationSource); }}Copy the code

4. Use SpringCloud Gateway

  • Service Gateway (ZUUL), also known as the routing center, is used to uniformly access all API interfaces and maintain services.
  • Spring Cloud Zuul integrates with Spring Cloud Eureka to realize automatic maintenance of service instances. Therefore, when using the service routing configuration, we do not need to specify the specific address of the service instance as the traditional routing configuration method. We only need to use the Ant mode configuration file parameters

5. Use nginx for forwarding

  • Now there are two websites that want to access each other’s interfaces. If you want to access http://b.b.com:81/B in http://a.a.com:81/A, do the following
  • Then visit www.my.com/B by visiting www.my.com/A
server { listen 80; server_name www.my.com; location /A { proxy_pass http://a.a.com:81/A; index index.html index.htm; } location /B { proxy_pass http://b.b.com:81/B; index index.html index.htm; }}Copy the code
  • If two ports want to access each other, perform the following configuration in http://b.b.com:80/Api to access http://b.b.com:81/Api
  • Cross-domain problems can be solved using the Nginx forwarding mechanism
server { listen 80; server_name b.b.com; location /Api { proxy_pass http://b.b.com:81/Api; index index.html index.htm; }}Copy the code

Welcome Java engineers who have worked for one to five years to join Java Programmer development: 721575865

Group provides free Java architecture learning materials (which have high availability, high concurrency, high performance and distributed, Jvm performance tuning, Spring source code, MyBatis, Netty, Redis, Kafka, Mysql, Zookeeper, Tomcat, Docker, Dubbo, multiple knowledge architecture data, such as the Nginx) reasonable use their every minute and second time to learn to improve yourself, don’t use “no time” to hide his ideas on the lazy! While young, hard to fight, to the future of their own account!