Eight implementation solutions for cross-domain js front-end

1. jsonp cross-domain
2. document.domain + iframe cross-domain
3. location.hash + iframe cross-domain
4. window.name + iframe cross-domain
5. postMessage cross-domain
6. Cross-Origin Resource Sharing (CORS)

Native node.js implementation
koa combined with koa2-cors middleware implementation

7. WebSocket protocol cross-domain

8. nginx proxy cross-domain

Due to the restrictions of the same-origin policy, only scripts that meet the same origin can obtain resources. While this helps ensure network security, it also limits the use of resources.
So how to achieve cross-domain? Here are some methods to achieve cross-domain.

1. jsonp cross-domain

Principle: The script tag introduces js files without being affected by cross-domain. Not only that, tags with src attributes are not affected by the same-origin policy.

Based on this feature, we load resources through the src attribute of the script tag, and place the data on the server pointed to by the src attribute in json format.

Since we cannot determine the loading status of the script's src and do not know whether the data has been acquired, we will define the processing function in advance. The server will add this function name at the beginning of the data, and when all the data is loaded, it will call the function we defined in advance. At this time, the actual parameter passed in to the function is the data returned by the backend.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    function callback(data) {
      alert(data.test);
    }
  </script>
  <script src="./jsonp.js"></script>
</body>
</html>

jsonp.js

callback({"test": 0});

Visit index.html and the pop-up window will show 0
The disadvantage of this solution is that only one request, get, can be implemented.

2. document.domain + iframe cross-domain

This solution is limited to application scenarios where the main domain is the same but the subdomains are different.

For example, Baidu’s main webpage is www.baidu.com, and websites such as zhidao.baidu.com and news.baidu.com are subdomains of the main domain www.baidu.com.

Implementation principle: Both pages set document.domain as the basic primary domain through js, thus achieving the same domain and being able to operate resources on each other.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <iframe src="https://mfaying.github.io/lesson/cross-origin/document-domain/child.html"></iframe>
  <script>
    document.domain = 'mfaying.github.io';
    var t = '0';
  </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    document.domain = 'mfaying.github.io';
    alert(window.parent.t);
  </script>
</body>
</html>

3. location.hash + iframe cross-domain

When the parent page changes the src attribute of the iframe, the value of location.hash changes, but the page will not be refreshed (it is still the same page). The value can be obtained through window.localtion.hash on the child page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <iframe src="child.html#" style="display: none;"></iframe>
  <script>
    var oIf = document.getElementsByTagName('iframe')[0];
    document.addEventListener('click', function () {
      oIf.src += '0';
    }, false);
  </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    window.onhashchange = function() {
      alert(window.location.hash.slice(1));
    }
  </script>
</body>
</html>

Click on the index.html page pop-up window and it will show 0

4. window.name + iframe cross-domain

Principle: The window.name property still exists after loading different pages (even different domain names), and name can be assigned a longer value (2MB).
The name attribute of the window is set on the page of non-same origin as the iframe, and then the iframe is pointed to the page of same origin. At this time, the name attribute value of the window remains unchanged, thus realizing cross-domain data acquisition.

./parent/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var oIf = document.createElement('iframe');
    oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/child.html';
    var state = 0;
    oIf.onload = function () {
      if (state === 0) {
        state = 1;
        oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/parent/proxy.html';
      } else {
        alert(JSON.parse(oIf.contentWindow.name).test);
      }
    }
    document.body.appendChild(oIf);
  </script>
</body>
</html>

./parent/proxy.html

Empty file, only used as proxy page

./child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    window.name = '{"test": 0}'
  </script>
</body>
</html>

5. postMessage cross-domain

postMessage was proposed by HTML5 and can realize cross-document message transmission.
usage
getMessageHTML.postMessage(data, origin);
data: Any basic type or copyable object supported by the HTML5 specification, but some browsers only support strings, so it is best to use JSON.stringify() serialization when passing parameters.

origin: protocol + host + port number, can also be set to "*", which means it can be passed to any window. If you want to specify the same origin as the current window, set it to "/".
getMessageHTML is our reference to the page that we want to receive information from. It can be the contentWindow property of the iframe, the return value of window.open, or the value obtained from window.frames via name or subscript.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <iframe id='ifr' src='./child.html' style="display: none;"></iframe>
    <button id='btn'>click</button>
    <script>
      var btn = document.getElementById('btn');
      btn.addEventListener('click', function () {
        var ifr = document.getElementById('ifr');
        ifr.contentWindow.postMessage(0, '*');
      }, false);
    </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <script>
      window.addEventListener('message', function(event){
        alert(event.data);
      }, false);
    </script>
</body>
</html>

Click the button on the index.html page and a pop-up window will display 0.

6. Cross-Origin Resource Sharing (CORS)

Cross-domain requests can be implemented by setting Access-Control-Allow-Origin on the server side. If it is a cookie request, both the front-end and back-end need to be set.
Due to the restrictions of the same-origin policy, the cookie read is the cookie of the domain where the cross-domain request interface is located, not the cookie of the current page.
CORS is the current mainstream cross-domain solution.

Native node.js implementation

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
</head>
<body>
  <script>
    $.get('http://localhost:8080', function (data) {
      alert(data);
    });
  </script>
</body>
</html>

server.js

var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
  res.writeHead(200, {
    'Access-Control-Allow-Credentials': 'true', // The backend allows sending cookies
    'Access-Control-Allow-Origin': 'https://mfaying.github.io', // Domains allowed to access (protocol + domain name + port)
    'Set-Cookie': 'key=1;Path=/;Domain=mfaying.github.io;HttpOnly' // HttpOnly: scripts cannot read cookies
  });

  res.write(JSON.stringify(req.method));
  res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

koa combined with koa2-cors middleware implementation

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
</head>
<body>
  <script>
    $.get('http://localhost:8080', function (data) {
      alert(data);
    });
  </script>
</body>
</html>

server.js

var koa = require('koa');
var router = require('koa-router')();
const cors = require('koa2-cors');

var app = new koa();

app.use(cors({
  origin: function (ctx) {
    if (ctx.url === '/test') {
      return false;
    }
    return '*';
  },
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  maxAge: 5,
  credentials: true,
  allowMethods: ['GET', 'POST', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

router.get('/', async function (ctx) {
  ctx.body = "0";
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);
console.log('server is listening in port 3000');

7. WebSocket protocol cross-domain

The WebSocket protocol is a new protocol for HTML5. It can realize full-duplex communication between browser and server and allow cross-domain communication, which is a good implementation of server-side push technology.

Front-end code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var ws = new WebSocket('ws://localhost:8080/', 'echo-protocol');
    // Event triggered by establishing connection ws.onopen = function () {
      var data = { "test": 1 };
      ws.send(JSON.stringify(data)); // can send data to the backend};
 
    // callback method for receiving a message ws.onmessage = function (event) {
      alert(JSON.parse(event.data).test);
    }
 
    // Disconnection triggered event ws.onclose = function () {
      conosle.log('close');
    };
  </script>
</body>
</html>

server.js

var WebSocketServer = require('websocket').server;
var http = require('http');
 
var server = http.createServer(function(request, response) {
  response.writeHead(404);
  response.end();
});
server.listen(8080, function() {
  console.log('Server is listening on port 8080');
});
 
wsServer = new WebSocketServer({
    httpServer: server,
    autoAcceptConnections: false
});
 
function originIsAllowed(origin) {
  return true;
}
 
wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      request.reject();
      console.log('Connection from origin ' + request.origin + ' rejected.');
      return;
    }
    
    var connection = request.accept('echo-protocol', request.origin);
    console.log('Connection accepted.');
    connection.on('message', function(message) {
      if (message.type === 'utf8') {
        const reqData = JSON.parse(message.utf8Data);
        reqData.test -= 1;
        connection.sendUTF(JSON.stringify(reqData));
      }
    });
    connection.on('close', function() {
      console.log('close');
    });
});

8. nginx proxy cross-domain

Principle: The same-origin policy is a browser security policy and is not part of the HTTP protocol. The server side calls the HTTP interface only using the HTTP protocol, and there is no crossing problem.

Implementation: Use nginx to configure a proxy server (domain name is the same as test1, but port is different) as a jump server, and use reverse proxy to access the test2 interface. You can also modify the test information in the cookie to facilitate writing of the current domain cookie and achieve cross-domain login.
Specific configuration of nginx:

#proxy server {
    listen 81;
    server_name www.test1.com;

    location / {
        proxy_pass http://www.test2.com:8080; #Reverse proxy proxy_cookie_test www.test2.com www.test1.com; #Modify the domain name in the cookie index index.html index.htm;

        add_header Access-Control-Allow-Origin http://www.test1.com; #When the front-end only crosses the domain without cookies, it can be *
        add_header Access-Control-Allow-Credentials true;
    }
}

This concludes this article about eight implementation solutions for cross-domain solutions using js front-end. For more relevant js cross-domain content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Use jsonp to perfectly solve cross-domain problems
3 common methods of js cross-domain request data
8 solutions for js front-end to solve cross-domain problems (latest and most complete)
Javascript cross-domain access solution
js iframe cross-domain access (same primary domain/non-same primary domain) is introduced in depth
Summary of 5 ways to deal with js cross-domain issues
JS cross-domain solution: using CORS to achieve cross-domain

<<: Special commands in MySql database query

>>: Detailed explanation of Linux system input and output management and common functions of vim