非常全的跨域实现方案

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

一、jsonp跨域

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

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

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

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/jsonp
演示网址：https://mfaying.github.io/lesson/cross-origin/jsonp/index.html

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});

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

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

二、document.domain + iframe跨域

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

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

实现原理：两个页面都通过js设置document.domain为基础主域，就实现了同域，就可以互相操作资源了。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/document-domain
演示网址：https://mfaying.github.io/lesson/cross-origin/document-domain/index.html

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>

三、location.hash + iframe跨域

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

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/location-hash
演示网址：https://mfaying.github.io/lesson/cross-origin/location-hash/index.html

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

四、window.name + iframe跨域

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

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

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

五、postMessage跨域

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

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

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

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/postMessage
演示网址：https://mfaying.github.io/lesson/cross-origin/postMessage/index.html

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。

六、跨域资源共享（CORS）

只要在服务端设置Access-Control-Allow-Origin就可以实现跨域请求，若是cookie请求，前后端都需要设置。
由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，并非当前页的cookie。

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

原生node.js实现

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/cors
演示网址：https://mfaying.github.io/lesson/cross-origin/cors/index.html(访问前需要先执行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中间件实现

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/koa-cors
演示网址：https://mfaying.github.io/lesson/cross-origin/koa-cors/index.html (访问前需要先执行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');

七、WebSocket协议跨域

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

示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/websocket
演示网址：https://mfaying.github.io/lesson/cross-origin/websocket/index.html(访问前需要先安装依赖包，再执行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');
    });
});

八、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;
    }
}

原文地址：https://www.cnblogs.com/fe-read/p/11783552.html

时间： 2024-10-10 09:54:06

非常全的跨域实现方案的相关文章

（CORS）跨域资源共享方案

在XMLHttpRequest对象访问跨域资源的时候的一些被认可的跨域访问资源的方案叫 (CORS)跨域资源共享方案. 在ie8中,可以通过XDomainRequest进行CORS,而在其他的浏览器中可以通过XHR对象 即可进行CORS. 代码取自javascript高级程序设计3版: 1 function aCORSRequest(method,url){ 2 3 var xhr = new XMLHttpRequest(); 4 5 if('withCredentials' in xhr){

Django解决跨域俩方案

方案一:一套干掉全部Primary 首先你的pip下载一个第三方库贼厉害的: pip install corsheaders 然后在项目的setting.py里面引入第三方库,如下: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django

chrome实现全浏览器跨域ajax请求

如图,在chrome快捷方式上打开属性栏,在‘目标’栏加上后缀--disable-web-security --user-data-dir.即可实现在此浏览器上所有网页的跨域请求.

iframe跨域通信方案

概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表: 对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题. postMessage方法 window.postMe

Java解决跨域的方案

在后台加上,在数据返回之前添加 response.setHeader("Access-Control-Allow-Origin","*"); 就可以了,前台不用做任何处理!!! 完整案例如下: @RequestMapping("xxx") @ResponseBody public Today xxx(@PathVariable Integer id,HttpServletRequest request,HttpServletResponse re

前端常见跨域解决方案（全）

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

Angular通过CORS实现跨域方案

以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了,有一些比如document.domain还有iframe的解决方案委实"丑陋"一些,感觉不再适用于现在一些项目中. 就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光增加了性能上的高负荷,同时也不利于掌控. 在Angular应用中实现跨域的方式相对简单,基本上通

整站HTTPS后的跨域请求 CORS是否还有效？

| 导语  手Q马上就要全量https了,很多业务都有跨域ajax请求的需求,原来使用的CORS头在HTTPS环境中还继续能用吗?我搜遍了谷歌.百度,都没看到有明确的答案,那么就自己来尝试一下吧. 关于CORS在HTTPS环境下到底效果如何,一直没找到明确的答案.在MDN等网页只能看到CORS是解决HTTP跨域的方案,或者HTTP访问HTTPS/HTTPS访问HTTP都属于跨域范围,但没有人提到两个HTTPS站点能否通过CORS互相访问.那么,就自己动手吧. 首先,使用nodejs搭建一个htt

前端常见跨域解决方案

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入:<link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景