What exactly is cross-domain and how to solve cross-domain problems

In a development model that separates the front end and the back end, you often encounter cross-domain problems, where the Ajax request is sent, the server responds successfully, but the front end just doesn’t get the response, which is cross-domain problems. So how does the cross-domain problem arise, and how do we solve the cross-domain problem?

What does cross-domain mean?

Browsers use the same origin policy to protect against XSS and CSRF attacks. The browser supports only same-source access. So-called homologous domain name | | port “agreement” means the three must be exactly the same, even the same IP, different domain name also not line, the secondary domain name.

2. Not restricted by homology:

  • Connections, redirects, and form submissions in pages are not restricted by the same origin policy

  • Cross-domain resource importing is possible, but js cannot read or write loaded content.

    • <script src=""></script>
Copy the code
    • <img>
Copy the code
    • <link>
Copy the code
    • <iframe>
Copy the code

Cross-domain is the operation of resources from another source that is affected by the same origin policy

Solve cross-domain problems

The response to a cross-domain request is usually intercepted by the browser. Note that the response is intercepted by the browser, the request has been processed by the server, and the response has successfully reached the client, but it is not obtained.

1 Front-end solution cross-domain solution

  • Create script dynamically
  • Document.domain + iframe (only if the primary domain is the same)

  • location.hash + iframe

  • window.name + iframe

  • PostMessage (XMLHttpRequest Level 2 API in HTML5)

    The iframe must be compatible with Internet Explorer 6, 7, 8, and 9

  • CORS

    It uses additional HTTP headers to tell the browser to allow Web applications running on an Origin (domain) to access specified resources from different source servers.

  • JSONP

    Ajax requests are subject to the same origin policy, whereas Script tag requests are not

  • web sockets

    The same origin policy does not apply to Web Sockets

2 Back-end solution cross-domain solution

  • CORS

    CORS is actually a W3C standard, the full name is cross-domain resource sharing. It requires both browser and server support. Specifically, non-IE and IE10 + support for CORS. The server needs to attach specific response headers.

3 Use the proxy to solve cross-domain problems

Server-side interaction is not restricted by the same origin policy

Using proxies to avoid cross-domain requests requires configuration changes to Nginx, Apache, and so on

Nginx Proxy

Nginx is a high-performance reverse proxy server that can be used to easily solve cross-domain problems.

The reverse proxy takes requests from clients and forwards them to other servers. The main scenario is to maintain the load balancing of the server cluster. In other words, the reverse proxy takes requests from other servers and then selects an appropriate server to forward the request to.

server { listen 80; server_name client.com; location /api { proxy_pass server.com; }}Copy the code

The Nginx server acts as a reverse proxy and forwards the request to server.com. The Nginx server, which has the same domain name as client.com, sends the client to client.com/api first. When the response is returned, it is sent back to the client, completing the process of cross-domain requests.