The front-end of B/S architecture projects often encounter cross-domain problems. What are cross-domain problems and what are the common solutions? Most people probably have only a sketchy understanding of cross-domain problems.

Representation of cross-domain problems

So what exactly is cross-domain? Cross-domain is when documents or scripts in one domain request resources in another domain. In cross-domain issues, browsers must comply with the same-origin policy to restrict the execution of files from websites with different sources for security reasons. Same-origin means that the protocol, domain name, and port number are all the same.

If not homologous, the following three behaviors are restricted:

  • Cookies, localStorage, and IndexedDB of non-homogeneous web pages cannot be obtained
  • DOM (iframe) cannot be accessed for non-homologous pages
  • Unable to send AJAX requests to non-cognate addresses (can send, but browser rejects response)

The following points must be made clear:

  • Cross-domain problems only exist in browsers, and in C/S architectures, such as apps, cross-domain problems do not exist.
  • The same origin policy of the browser does not restrict the sending of requests. In cross-domain scenarios, servers in different domains can receive requests, but the browser rejects the response, as shown in the following figure.

So why do browsers have cross-domain problems and apps don’t have cross-domain problems? Very simple, app is its own, all requests are to its own server, and the browser can visit many websites, each website can have cookies and other information, if other malicious websites use, the consequences will be terrible.

Cross-domain solutions

There are many cross-domain solutions, including:

Commonly used schemes are:

  • Cross-domain Resource Sharing (CORS)
  • Nginx agents cross domains
  • JSONP

Cross-domain resource sharing CORS

CROS is cross-origin Resource Sharing, which is proposed to solve the cross-domain request. The Cross-domain Resource Sharing (CORS) standard adds a new set of HTTP header fields that allow servers to declare which source sites have access to which resources.

For simple request servers configured to accept requests directly, and for HTTP request methods that are not simple and may have side effects on server data (especially HTTP requests other than GET, or POST requests with some MIME types), The browser must first issue a preflight request using the OPTIONS method to know whether the server will allow the cross-domain request.

If the server is configured to allow cross-domain, does the browser allow cross-domain access? Access-control-allow-origin: * when the browser receives the response header access-Control-allow-origin: *, it will match the urls that are allowed to cross domains and accept the response. As follows, I configured annotations in Spring Boot on the server side and succeeded in cross-domain.

Server configuration: Of course you can configure it globally instead of annotating every class

The response is as follows:

Nginx agents cross domains

CORS can be configured using Nginx in addition to simply using Spring Boot annotations above. For non-simple requests, the browser will send a total of two requests, the first is the pre-check request OPTIONS.

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return204; }}Copy the code

JSONP

The principle of JSONP is that the SRC attribute of

JSONP requires browser and server cooperation.

The resources

  • What is cross-domain? What are the solutions?
  • Thoroughly understand the cross-domain nature of browsers
  • Nginx configures cross-domain requests for access-Control-allow-origin *