guidance

The guidance content is the core of the whole content, if you understand it can directly skip the content of this article. Save ten damn minutes!

In development, there has always been a problem with feeling across domains. The solution is solved, but it can’t be said to be thoroughly understood. Today, we will take you to seriously cross domain clear, clear.

If you have a problem with this type of call, you will get the following error: if you have a problem with this type of call, you will get the following error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9100’ is therefore not allowed access. The response had HTTP status code 400.

So what is cross-domain?

First let’s make cross-domain clear!

First, what is cross-domain

The same origin policy is restricted by the browser. The Sameoriginpolicy is a convention. It is the core and basic security function of the browser. If the Sameoriginpolicy is missing, 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. The same origin policy prevents javascript scripts in one domain from interacting with content in another domain. Same-origin (that is, in the same domain) means that two pages have the same protocol, host, and port.

1.1 Homology and non-homology

The same request

  • Ajax
  • Axios
  • Resource
  • Fetch

Non-homologous request

  • <img src="">

  • <script src="">

  • <link href="">

Since we use a separate programming approach, there must be cross-domain problems between the front end and the back end. CORS can be used to solve cross-domain problems

2. Introduction to CORS

CORS is a W3C standard, which stands for “Cross-origin Resource Sharing”. CORS requires both browser and server support. Currently, all browsers support this function, and Internet Explorer cannot be lower than Internet Explorer 10. It allows browsers to issue XMLHttpRequest requests across source servers, overcoming the limitation that AJAX can only be used in the same source. The entire CORS communication process is completed automatically by the browser without user participation. For developers, CORS communication is no different from same-origin AJAX communication, and the code is exactly the same. As soon as the browser discovers that an AJAX request crosses the source, it automatically adds some additional headers, and sometimes an additional request, but the user doesn’t feel it. Therefore, the key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible.

The request process is shown below:

Preflight Request:

The server then returns a PreflightResponse

So how do you do that? SpringMVC is in version 4.2 or above and can be implemented across domains using annotations. All we need to do is add the @crossorigin annotation to the Controller class.

2.1 CORS is mainly divided into two types of requests

  • Simple request: Two conditions are met, as shown
  • Complex request: Either simple request or complex request

3. Analysis of cross-domain causes

The same origin policy of the browser is created to protect the browser

Cross-domain solutions

There are four main types of cross-domain solutions:

  • The front of the json
  • The server configures CORS in the response header
  • Proxy server
  • Batch processing of request response headers in the gateway on the Java back end

5. Judge cross-domain standards

Generally speaking, if the protocol, host and port of the server where the front end is located is inconsistent with the protocol, host and port of the server where the background interface of the front end is located, and the server does not do cross-domain processing, cross-domain will definitely occur.

In case of cross-domain, even if the server returns data to the browser, the browser will reject the response.

Do you have cross-domain problems? Please share your questions in the comments section.