what is cross-domain?

Cross-domain is not a problem, it is a security mechanism. The browser has a policy called same origin policy, which stipulates that some requests cannot be accepted by the browser.

it is worth mentioning that the cross-domain caused by the same origin policy is that the browser unilaterally refuses to respond to the data, and the server has finished processing and responded.

what is homologous policy

A url consists of three parts: protocol, domain name (ip address), and port .

is called homologous only when the protocol, domain name, and port are the same.

the same origin policy states that the browser will accept the response only if the sending side of the request and the receiving side are of the same origin.

give me an example

Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.5:8081/index // different source ports are different
Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.6:8080/index // different source ip is different
Send request address: http:47.96.127.5:8080/index accept request address: https:47.96.127.5:8080/index // different source protocols are different
Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.5:8080/login // same origin protocol, port, ip are all the same, it doesn't matter if the path is different.
Undefined

and when our request does not conform to the same origin policy. The following error often occurs: 👇

five common ways to solve cross-domain problems

first: JQuery's ajax (recommended for JQuery projects)

jq's ajax comes with a cross-domain solution. The underlying principle adopts the cross-domain solution of JSONP. As follows

function callback(){
    console.log("with a monthly salary of 1500 yuan, my heart is more bitter than that of American style.")
}

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // the request method sets the cross-domain focus for jsonp
    jsonpCallback: "callBack",  // callback function
});

this is the most common solution in JQ projects.

second: script tags solve cross-domain (used in ancient Web projects)

if your project is handed down from ancestors. No framework, not even a JQuery. It doesn't matter, we can try to use the native method to solve it.

Native uses the feature that script tags are not subject to cross-domain restrictions to achieve cross-domain.

  <script>
            // callback
            function callBack(res) {
                console.log("Cross-domain callback",res);
               //... Remember to delete script ↓ after you have finished all your operations.
               document.head.getElementsByClassName("script")[0].remove();
            }

            const scriptDom = document.createElement('script');
            scriptDom.type = 'text/javascript';
            scriptDom.class = 'script'; // used to delete
            // pass a callback function name to the backend to facilitate the execution of the callback function defined in the front end when the backend returns.
            scriptDom.src = 'http://192.167.0.152:9996/inface?callback=callBack';
            document.head.appendChild(script); // Mount the tag to dom
        </script>

it is important to note here that remember to delete script after using the request, otherwise more script tags will be mounted on the DOM as the request changes.

in ancient web, this was a solution. But it's not used anymore.

Don't use this method in

vue/react/jq and other framework projects, it's not impossible, it's just that there are better choices

third: front-end agents solve cross-domain solutions

each framework has a different proxy configuration . Here is just an example of umi.js (react) that I use.

The

Umi.js framework will have a config.ts / config.js file, in which there will be proxy fields, and the fields will be configured according to the figure. Cross-domain can be completed

fourth: server agent (Nginx agent)

nginx agents are generally used in production environments. It is a solution for the server to solve the cross-domain problem.

simple configuration template 👇

# if it listens that the request interface address is www.xxx.com/api/page, nginx sends a request to the address http://www.yyy.com:9999/api/page
server {
     listen       80; 
        server_name  www.xxx.com;
        # filter out requests containing api
        location /api/ { 
            proxy_pass http://www.yyy.com:9999; # address of the real server
        }
}

Note: it is a common solution in production environment that nginx needs to restart the nginx,nginx agent after configuring the agent.

fifth: add response headers in the background (logic layer) to solve

The Access-Control-Allow-Origin response header means a request from a secure peer.

for example, http://192.168.0.103:8080 sent a request to http://192.168.0.102:8080. As a result, because the domain name is different, the message is blocked because the IP address is inconsistent .

but if http://192.168.0.102:8080 carries the upper attribute value'< a href= "http://192.168.0.103:8080" target=" _ blank "title=" http://192. in the Access-Control-Allow-Origin field in the response header 168.0.103 nofollow noopener noreferrer 8080 "ref=" > http://192.168.0.103:8080' is as follows

// response header
Access-Control-Allow-Origin':'http://192.168.0.103:8080'

this is tantamount to telling the browser that the address http://192.168.0.102:8080 is secure, please do not block it.

like this http://192.168.0.103:8080 can accept the information returned from http://192.168.0.102:8080.

of course, we can also set all domain names without blocking (such as below)

// response header
// * means that all domain names are not blocked
Access-Control-Allow-Origin':'*'

node cases are as follows

res.writeHead(200, {
    Access-Control-Allow-Origin':'http://192.168.0.103:8080'
});

// or

res.writeHead(200, {
    Access-Control-Allow-Origin':'*'
});

this scheme is not recommended because it is not secure. It is recommended to use it when writing small exercises, because it is really convenient.

Summary

five common cross-domain solutions are as follows

1. jsonp, which stands for $.ajax of jquery. (for JQuery projects only)
2. script tag solves cross-domain (the scheme used by ancient web is no longer recommended)
3. Front-end Agent
4. nginx Agent
5. set response headers (not recommended, low security, easy to use for small exercises)