很是全的跨域实现方案

时间  2019-11-08
标签 很是 实现 方案 繁體版
原文   原文链接

因为同源策略的限制，知足同源的脚本才能够获取资源。虽然这样有助于保障网络安全，但另外一方面也限制了资源的使用。 那么如何实现跨域呢，如下是实现跨域的一些方法。javascript

1、jsonp跨域

原理：script标签引入js文件不受跨域影响。不只如此，带src属性的标签都不受同源策略的影响。html

正是基于这个特性，咱们经过script标签的src属性加载资源，数据放在src属性指向的服务器上，使用json格式。前端

因为咱们没法判断script的src的加载状态，并不知道数据有没有获取完成，因此事先会定义好处理函数。服务端会在数据开头加上这个函数名，等所有加载完毕，便会调用咱们事先定义好的函数，这时函数的实参传入的就是后端返回的数据了。html5

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…java

index.htmlnode

<!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.jsjquery

callback({"test": 0});
复制代码

访问index.html弹窗便会显示0nginx

该方案的缺点是：只能实现get一种请求。git

2、document.domain + iframe跨域

此方案仅限主域相同，子域不一样的应用场景。github

好比百度的主网页是www.baidu.com，zhidao.baidu.com、news.baidu.com等网站是www.baidu.com这个主域下的子域。

实现原理：两个页面都经过js设置document.domain为基础主域，就实现了同域，就能够互相操做资源了。 示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…

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跨域

父页面改变iframe的src属性，location.hash的值改变，不会刷新页面(仍是同一个页面)，在子页面能够经过window.localtion.hash获取值。

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…

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>
复制代码

点击index.html页面弹窗便会显示0

4、window.name + iframe跨域

原理：window.name属性在不一样的页面（甚至不一样域名）加载后依旧存在，name可赋较长的值（2MB）。

在iframe非同源的页面下设置了window的name属性，再将iframe指向同源的页面，此时window的name属性值不变，从而实现了跨域获取数据。 示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…

./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 空文件，仅作代理页面

复制代码

./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跨域

postMessage是HTML5提出的，能够实现跨文档消息传输。

用法 getMessageHTML.postMessage(data, origin); data： html5规范支持的任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也能够设置为"*"，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

getMessageHTML是咱们对于要接受信息页面的引用，能够是iframe的contentWindow属性、window.open的返回值、经过name或下标从window.frames取到的值。

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…

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>
复制代码

点击index.html页面上的按钮，弹窗便会显示0。

6、跨域资源共享（CORS）

只要在服务端设置Access-Control-Allow-Origin就能够实现跨域请求，如果cookie请求，先后端都须要设置。 因为同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，并不是当前页的cookie。

CORS是目前主流的跨域解决方案。

原生node.js实现

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…(访问前须要先执行node server.js命令启动本地服务器)

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',     // 后端容许发送Cookie
    'Access-Control-Allow-Origin': 'https://mfaying.github.io',    // 容许访问的域（协议+域名+端口）
    'Set-Cookie': 'key=1;Path=/;Domain=mfaying.github.io;HttpOnly'   // HttpOnly:脚本没法读取cookie
  });

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

server.listen('8080');
console.log('Server is running at port 8080...');
复制代码

koa结合koa2-cors中间件实现

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros… (访问前须要先执行node server.js命令启动本地服务器)

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协议跨域

WebSocket协议是HTML5的新协议。可以实现浏览器与服务器全双工通讯，同时容许跨域，是服务端推送技术的一种很好的实现。

示例代码：github.com/mfaying/les… 演示网址：mfaying.github.io/lesson/cros…(访问前须要先安装依赖包，再执行node server.js命令启动本地websocket服务端)

前端代码：

<!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'); // 创建链接触发的事件 ws.onopen = function () { var data = { "test": 1 }; ws.send(JSON.stringify(data));// 能够给后台发送数据 }; // 接收到消息的回调方法 ws.onmessage = function (event) { alert(JSON.parse(event.data).test); } // 断开链接触发的事件 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代理跨域

原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不存在跨越问题。

实现：经过nginx配置代理服务器（域名与test1相同，端口不一样）作跳板机，反向代理访问test2接口，且能够修改cookie中test信息，方便当前域cookie写入，实现跨域登陆。

nginx具体配置：

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

    location / {
        proxy_pass   http://www.test2.com:8080;  #反向代理
        proxy_cookie_test www.test2.com www.test1.com; #修改cookie里域名
        index  index.html index.htm;

        add_header Access-Control-Allow-Origin http://www.test1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}
复制代码

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程