WEB front-end cross-domain solutions you deserve to know (detailed code explanation)

In the previous article "A brief analysis of zip compression and zip decompression in Node (with code)", I introduced you to a detailed explanation of the use of zip compression and zip decompression commands in Node. The following article will tell you about the WEB front-end cross-domain solution. Come and take a look, friends.

WEB front-end cross-domain solution

Cross-domain definition

Broad definition: cross-domain refers to one domain The document or script is trying to request resources from another domain.

1. Resource jump: link, redirect, form submission

2. Resource embedding: 2cdf5bf648cf2f33323966d7f58a7f3f, 3f1c4e4b6b16bbbd69b2ee476dc4f83a, 79d7c95122630a3791db16c5259dc98d, 04a0d55efbbfd646a993fbc01f262c57 and other dom tags, as well as background:url() in the style , @font-face() and other file external links

3. Script request: ajax request initiated by js, dom and js Cross-domain operations of objects, etc.

Same origin policy

Same origin policy /SOP (Same origin policy ) is a convention introduced by Netscape into the browser in 1995. It is the core and most basic security function of the browser. If the same-origin policy is missing, the browser will be vulnerable to XSS , CSFR and other attacks. The so-called homology means that the "protocol, domain name, and port" are the same. Even if two different domain names point to the same ip address, they are not from the same origin.

The same origin policy restricts the following behaviors:

1, Cookie, LocalStorage and IndexDB cannot Reading

2, DOM and Js objects cannot be obtained

3, AJAXrequest cannot be sent

Cross-domain solution

1)jsonpCross-domain

Get a grasp of the principles of jsonp A few points:

1. The src attribute of the html tag has no origin restriction (supports cross-domain). When the browser parses the script tag , will automatically download the resource pointed to by the src attribute value (url); after the resource file pointed to by the

2 and script tag is downloaded, The content will be executed immediately;

3. The server-side program will parse the parameters passed by url in the src attribute value, and based on these parameters, Returns a / multiple function call expressions. The parameters of these function call expressions are the data that the client wants to get across domains;

4. Files generated and returned by the server , the function called by the expression has been defined locally in advance, and the parameters are the data you want to get from the cross-domain server. Literal script tags are acceptable, as are script dynamically added to the dom tree. The latter is more convenient for event binding.

5. It can only achieve get, which is also his weakness

##Achievement:

// 服务端返回：
test({
  code: 0,
  message: "成功",
});

<!-- 原生js -->
<script>
  var script = document.createElement("script");
  script.type = "text/javascript";
  // 传参并指定回调执行函数为callback
  script.src = "http://www.chuchur.com/login?callback=test";
  document.head.appendChild(script);
  // 回调执行函数
  function test(res) {
    console.log(JSON.stringify(res));
  }
</script>

//jquery ajax：
$.ajax({
  url: "http://www.chuchur.com/login",
  type: "get",
  dataType: "jsonp", // 请求方式为jsonp
  jsonpCallback: "test", // 自定义回调函数名
  data: {},
});

//vue.js
this.$http
  .jsonp("http://www.chuchur.com/login", {
    params: {},
    jsonp: "test",
  })
  .then((res) => {
    console.log(res);
  });

2)document.domain iframe Cross-domain

Principle: This solution is limited to the same main domain and different subdomains In this case, the principle is that the two pages forcefully set window.domain as the main domain through js, thus achieving the same domain.

Implementation:

<!-- 父窗口 https://www.chuchur.com/a.html -->
<iframe id="iframe" src="https://b.chuchur.com/b.html"></iframe>
<script>
  document.domain = "chuchur.com";
  var user = "chuchur";
</script>
<!-- 子窗口 https://b.chuchur.com/b.html -->
<script>
  document.domain = "chuchur.com";
  // 获取父窗口中变量
  alert("从父窗口取得数据" + window.parent.user);
</script>

3)location.hash iframeCross-domain

Principle: Its The principle is to pass the value through URL, then monitor the change of its hash value, then use the middle layer as a springboard, and then use the parent-child window js parent to finally access the same Domain all page objects.

Domain

1: a.html, domain 2:b.html, domain 1:c.html .

a.html, b.html Different domains can only communicate by passing values ​​through hash.

b.html, c.html Different domains can only communicate individually

a.html,c.html is in the same domain, so c.html can access the a.html page object# through parent

##Implementation

：

1、

a.html: (www.chuchur.com/a.html)

<iframe
  id="iframe"
  src="http://www.chuchur.org/b.html"
  style="display:none; "
></iframe>
<script>
  var iframe = document.getElementById("iframe");
  // 向b.html传hash值
  setTimeout(function () {
    iframe.src = iframe.src + "#nick=chuchur";
  }, 1000);
  // 开放给同域c.html的回调方法
  function test(res) {
    alert("数据来自c.html ---> " + res);
  }
</script>
`

2,

b.html: (www.chuchur.org/b.html)

<iframe
  id="iframe"
  src="http://www.chuchur.com/c.html"
  style="display:none; "
></iframe>
<script>
  var iframe = document.getElementById("iframe");
  // 监听a.html传来的hash值，再传给c.html
  window.onhashchange = function () {
    iframe.src = iframe.src + location.hash;
  };
</script>

3,

c.html: (www. chuchur.com/c.html)

<script>
  // 监听b.html传来的hash值
  window.onhashchange = function () {
    // 再通过操作同域a.html的js回调，将结果传回
    window.parent.parent.test("你好: " + location.hash.replace("#nick=", ""));
  };
</script>

4)

window.name iframeCross domain

Principle

: Using the unique attributes of window.name, the name value will still exist on different pages or even different domains when the page is reloaded, and supports very long values, about 2MB.

Implementation

:

// 1.）a.html：(www.chuchur.com/a.html)
var proxy = function (url, callback) {
  var state = 0;
  var iframe = document.createElement("iframe");
  // 加载跨域页面 ，先让页面的name执行赋值，
  iframe.src = url;
  // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
  iframe.onload = function () {
    if (state === 1) {
      // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
      test(iframe.contentWindow.name);
      destoryFrame();
    } else if (state === 0) {
      // 第1次onload(跨域页)成功后，切换到同域代理页面
      iframe.contentWindow.location = "http://www.chuchur.com/b.html";
      state = 1;
    }
  };
  document.body.appendChild(iframe);
  // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
  function destoryFrame() {
    iframe.contentWindow.document.write("");
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
  }
};

// 请求跨域b页面数据
proxy("http://www.domain2.com/b.html", function (data) {
  alert(data);
});
// 2.）proxy.html：(www.chuchur.com/proxy.html）, 这个页面可以什么都不写，但是要保证能正常访问

<!-- 3.）b.html：(www.chuchur.org/b.html) -->
<script>
  window.name = "我是一个可以非常长的变量";
</script>

5)

postMessageCross-domain

postMessage

is API in HTML5 XMLHttpRequest Level 2, which can solve the following problems:

a.)

page and the new page it opens Window data transfer

b.)

Message transfer between multiple windows<p><code>c.）页面与嵌套的iframe消息传递

d.）上面三个场景的跨域数据传递 用法：postMessage(data, origin)方法接受两个参数

data：html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

origin： 协议+主机+端口号，也可以设置为"\*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

实现：

<!-- 1.）a.html：(www.chuchur.com/a.html) -->
<iframe
  id="iframe"
  src="http://www.chuchur.com/b.html"
  style="display:none; "
></iframe>
<script>
  var iframe = document.getElementById("iframe");
  iframe.onload = function () {
    var data = {
      name: "邱秋",
    };
    // 向chuchur.org传送跨域数据
    iframe.contentWindow.postMessage(
      JSON.stringify(data),
      "http://www.chuchur.org"
    );
  };

  // 接受chuchur.org返回数据
  window.addEventListener(
    "message",
    function (e) {
      alert("我来自chuchur.org： " + e.data);
    },
    false
  );
</script>
<!-- 2.）b.html：(www.chuchur.org/b.html) -->
<script>
  // 接收chuchur.com的数据
  window.addEventListener(
    "message",
    function (e) {
      alert("我来自chuchur.com " + e.data);
      var data = JSON.parse(e.data);
      if (data) {
        data.nick = chuchur;
        // 处理后再发回chuchur.com
        window.parent.postMessage(
          JSON.stringify(data),
          "http://www.chuchur.org"
        );
      }
    },
    false
  );
</script>

6）跨域资源共享（CORS）

原理：普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。 目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS)，CORS也已经成为主流的跨域解决方案。

实现：

//1）原生js
var xhr = new XMLHttpRequest(); // IE8/9需用window. XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.chuchur.com/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=chuchur');
xhr.onreadystatechange = function() {

  if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText);
  }

};
//2.）jQuery ajax
$.ajax({
  ...
  xhrFields: {
    withCredentials: true // 前端设置是否带cookie
  },
  crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
  ...
});
//3.）vue框架在vue-resource封装的ajax组件中加入以下代码：
Vue.http.options.credentials = true

//后台服务端
//java
/*
 * 导入包：import javax.servlet.http. HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.chuchur.com"); // 若有端口需写全（协议+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");

//node
var server = http.createServer();
server.on('request', function(req, res) {
  var postData = '';
  // 数据块接收中
  req.addListener('data', function(chunk) {
    postData += chunk;
  });

  // 数据接收完毕
  req.addListener('end', function() {
    postData = qs.parse(postData);
    // 跨域后台设置
    res.writeHead(200, {
      'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
      'Access-Control-Allow-Origin': 'http://www.chuchur.com', // 允许访问的域（协议+域名+端口）
      'Set-Cookie': 'l=abcdef; Path=/; Domain=www.chuchur.com; HttpOnly' // HttpOnly: 脚本无法读取cookie
    });

    res.write(JSON.stringify(postData));
    res.end();

  });

});
server.listen('3000');

7）nginx反向代理跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / { add_header Access-Control-Allow-Origin *; }

原理：通过nginx代理一个 同域不同端口的跳板机，反向代理要跨域的域名，这样可以修改cookie里面的domain信息实现跨域

实现：

#nginx具体配置：
server {

    listen       80;
    server_name  www.chuchur.com;
    location / {
        proxy_pass   http://www.chuchur.org; #反向代理
        proxy_cookie_domain www.chuchur.org www.chuchur.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.chuchur.com; #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }

}

前端实现

var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.chuchur.com/?user=chuchur', true);
xhr.send();

// node
var http = require('http')；
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {

  var params = qs.parse(req.url.substring(2));
  // 向前台写cookie
  res.writeHead(200, {

    'Set-Cookie': 'l=abcdef; Path=/; Domain=www.chuchur.org; HttpOnly' // HttpOnly: 脚本无法读取

  });
  res.write(JSON.stringify(params));
  res.end();

});
server.listen('8080');

8）Nodejs中间件代理跨域

原理同nignx代理跨域类似，都是通过代理服务器实现数据转发

实现：

//1）利用中间件http-proxy-middleware实现
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({

  // 代理跨域目标接口
  target: 'http://www.chuchur.org:',
  changeOrigin: true,
  // 修改响应头信息，实现跨域并允许带cookie
  onProxyRes: function(proxyRes, req, res) {

    res.header('Access-Control-Allow-Origin', 'http://www.chuchur.com');
    res.header('Access-Control-Allow-Credentials', 'true');

  },

  // 修改响应信息中的cookie域名
  cookieDomainRewrite: 'www.chuchur.com' // 可以为false，表示不修改

}));

app.listen(3000);
//2）利用中间件 webpack-dev-server实现
//webpack.config.js部分配置：
module.exports = {
  entry: {},
  module: {},
  ...
  devServer: {
    historyApiFallback: true,
    proxy: [{
      context: '/login',
      target: 'http://www.chuchur.org', // 代理跨域目标接口
      changeOrigin: true,
      cookieDomainRewrite: 'www.chuchur.com' // 可以为false，表示不修改
    }],
    noInfo: true

  }
}

9）WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

实现：

1、前端代码

<div>user input：<input type="text" /></div>
<script src="./socket.io.js"></script>
<script>
  var socket = io("http://www.chuchur.org");

  // 连接成功处理
  socket.on("connect", function () {
    // 监听服务端消息
    socket.on("message", function (msg) {
      console.log("来自服务器的消息： " + msg);
    });

    // 监听服务端关闭
    socket.on("disconnect", function () {
      console.log("Server socket has closed.");
    });
  });

  document.getElementsByTagName("input")[0].onblur = function () {
    socket.send(this.value);
  };
</script>

2、Nodejs socket后台：

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-type': 'text/html'
  });
  res.end();
});

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

// 监听socket连接
socket.listen(server).on('connection', function(client) {

      // 接收信息
      client.on('message', function(msg) {
          client.send('哈哈：' + msg);
          console.log('来自客服端的消息': -- - > ' + msg);
          });

        // 断开处理
        client.on('disconnect', function() {
          console.log('Client socket has closed.');
        });

      });

以上 9 种方式都能实现跨域数据传递，用的最多的还是第六种跨域资源共享（CORS），在前后端分离开发模式最常见。第七种和第八种中间件代理实现方式则是在基于node开发种常用的

其中第二，三、四、五种方案 ，利用ifame和postMessage则可以实现 不同窗口之间的数据通讯。

【完】

推荐学习：H5视频教程

The above is the detailed content of WEB front-end cross-domain solutions you deserve to know (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!