• 售前

  • 售后

热门帖子
入门百科

js前端办理跨域的八种实现方案

[复制链接]
天使粉粉魏 显示全部楼层 发表于 2021-10-26 14:01:45 |阅读模式 打印 上一主题 下一主题
目次


  • 一、jsonp跨域
  • 二、document.domain + iframe跨域
  • 三、location.hash + iframe跨域
  • 四、window.name + iframe跨域
  • 五、postMessage跨域
  • 六、跨域资源共享(CORS)

    • 原生node.js实现
    • koa结合koa2-cors中间件实现

  • 七、WebSocket协议跨域
  • 八、nginx署理跨域
由于同源策略的限制,满足同源的脚本才可以获取资源。固然这样有助于保障网络安全,但另一方面也限制了资源的使用。
那么怎样实现跨域呢,以下是实现跨域的一些方法。


一、jsonp跨域


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

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

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

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     function callback(data) {
  10.       alert(data.test);
  11.     }
  12.   </script>
  13.   <script src="./jsonp.js"></script>
  14. </body>
  15. </html>
复制代码
jsonp.js
  1. 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为根本主域,就实现了同域,就可以相互操作资源了。

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <iframe src="https://mfaying.github.io/lesson/cross-origin/document-domain/child.html"></iframe>
  9.   <script>
  10.     document.domain = 'mfaying.github.io';
  11.     var t = '0';
  12.   </script>
  13. </body>
  14. </html>
复制代码
child.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     document.domain = 'mfaying.github.io';
  10.     alert(window.parent.t);
  11.   </script>
  12. </body>
  13. </html>
复制代码
三、location.hash + iframe跨域


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

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <iframe src="child.html#" style="display: none;"></iframe>
  9.   <script>
  10.     var oIf = document.getElementsByTagName('iframe')[0];
  11.     document.addEventListener('click', function () {
  12.       oIf.src += '0';
  13.     }, false);
  14.   </script>
  15. </body>
  16. </html>
复制代码
child.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     window.onhashchange = function() {
  10.       alert(window.location.hash.slice(1));
  11.     }
  12.   </script>
  13. </body>
  14. </html>
复制代码
点击index.html页面弹窗便会体现0


四、window.name + iframe跨域


原理:window.name属性在不同的页面(甚至不同域名)加载后仍旧存在,name可赋较长的值(2MB)。
在iframe非同源的页面下设置了window的name属性,再将iframe指向同源的页面,此时window的name属性值稳定,从而实现了跨域获取数据。

./parent/index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     var oIf = document.createElement('iframe');
  10.     oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/child.html';
  11.     var state = 0;
  12.     oIf.onload = function () {
  13.       if (state === 0) {
  14.         state = 1;
  15.         oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/parent/proxy.html';
  16.       } else {
  17.         alert(JSON.parse(oIf.contentWindow.name).test);
  18.       }
  19.     }
  20.     document.body.appendChild(oIf);
  21.   </script>
  22. </body>
  23. </html>
复制代码
./parent/proxy.html

空文件,仅做署理页面
./child.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     window.name = '{"test": 0}'
  10.   </script>
  11. </body>
  12. </html>
复制代码
五、postMessage跨域


postMessage是HTML5提出的,可以实现跨文档消息传输。
用法
getMessageHTML.postMessage(data, origin);
data: html5规范支持的恣意根本类型或可复制的对象,但部门欣赏器只支持字符串,以是传参时最好用JSON.stringify()序列化。

origin: 协议+主机+端标语,也可以设置为"*",体现可以转达给恣意窗口,如果要指定和当前窗口同源的话设置为"/"。
getMessageHTML是我们对于要担当信息页面的引用,可以是iframe的contentWindow属性、window.open的返回值、通过name或下标从window.frames取到的值。

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.     <iframe id='ifr' src='./child.html' style="display: none;"></iframe>
  9.     <button id='btn'>click</button>
  10.     <script>
  11.       var btn = document.getElementById('btn');
  12.       btn.addEventListener('click', function () {
  13.         var ifr = document.getElementById('ifr');
  14.         ifr.contentWindow.postMessage(0, '*');
  15.       }, false);
  16.     </script>
  17. </body>
  18. </html>
复制代码
child.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.       window.addEventListener('message', function(event){
  10.         alert(event.data);
  11.       }, false);
  12.     </script>
  13. </body>
  14. </html>
复制代码
点击index.html页面上的按钮,弹窗便会体现0。


六、跨域资源共享(CORS)


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


原生node.js实现


index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <script
  7.     src="https://code.jquery.com/jquery-3.4.1.min.js"
  8.     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  9.     crossorigin="anonymous"></script>
  10. </head>
  11. <body>
  12.   <script>
  13.     $.get('http://localhost:8080', function (data) {
  14.       alert(data);
  15.     });
  16.   </script>
  17. </body>
  18. </html>
复制代码
server.js
  1. var http = require('http');
  2. var server = http.createServer();
  3. server.on('request', function(req, res) {
  4.   res.writeHead(200, {
  5.     'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
  6.     'Access-Control-Allow-Origin': 'https://mfaying.github.io',    // 允许访问的域(协议+域名+端口)
  7.     'Set-Cookie': 'key=1;Path=/;Domain=mfaying.github.io;HttpOnly'   // HttpOnly:脚本无法读取cookie
  8.   });
  9.   res.write(JSON.stringify(req.method));
  10.   res.end();
  11. });
  12. server.listen('8080');
  13. console.log('Server is running at port 8080...');
复制代码
koa结合koa2-cors中间件实现


index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <script
  7.     src="https://code.jquery.com/jquery-3.4.1.min.js"
  8.     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  9.     crossorigin="anonymous"></script>
  10. </head>
  11. <body>
  12.   <script>
  13.     $.get('http://localhost:8080', function (data) {
  14.       alert(data);
  15.     });
  16.   </script>
  17. </body>
  18. </html>
复制代码
server.js
  1. var koa = require('koa');
  2. var router = require('koa-router')();
  3. const cors = require('koa2-cors');
  4. var app = new koa();
  5. app.use(cors({
  6.   origin: function (ctx) {
  7.     if (ctx.url === '/test') {
  8.       return false;
  9.     }
  10.     return '*';
  11.   },
  12.   exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  13.   maxAge: 5,
  14.   credentials: true,
  15.   allowMethods: ['GET', 'POST', 'DELETE'],
  16.   allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
  17. }))
  18. router.get('/', async function (ctx) {
  19.   ctx.body = "0";
  20. });
  21. app
  22.   .use(router.routes())
  23.   .use(router.allowedMethods());
  24. app.listen(3000);
  25. console.log('server is listening in port 3000');
复制代码
七、WebSocket协议跨域


WebSocket协议是HTML5的新协议。可以大概实现欣赏器与服务器全双工通信,同时允许跨域,是服务端推送技能的一种很好的实现。

前端代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   <script>
  11.     var ws = new WebSocket('ws://localhost:8080/', 'echo-protocol');
  12.     // 建立连接触发的事件
  13.     ws.onopen = function () {
  14.       var data = { "test": 1 };
  15.       ws.send(JSON.stringify(data));// 可以给后台发送数据
  16.     };
  17.     // 接收到消息的回调方法
  18.     ws.onmessage = function (event) {
  19.       alert(JSON.parse(event.data).test);
  20.     }
  21.     // 断开连接触发的事件
  22.     ws.onclose = function () {
  23.       conosle.log('close');
  24.     };
  25.   </script>
  26. </body>
  27. </html>
复制代码
server.js
  1. var WebSocketServer = require('websocket').server;
  2. var http = require('http');
  3. var server = http.createServer(function(request, response) {
  4.   response.writeHead(404);
  5.   response.end();
  6. });
  7. server.listen(8080, function() {
  8.   console.log('Server is listening on port 8080');
  9. });
  10. wsServer = new WebSocketServer({
  11.     httpServer: server,
  12.     autoAcceptConnections: false
  13. });
  14. function originIsAllowed(origin) {
  15.   return true;
  16. }
  17. wsServer.on('request', function(request) {
  18.     if (!originIsAllowed(request.origin)) {
  19.       request.reject();
  20.       console.log('Connection from origin ' + request.origin + ' rejected.');
  21.       return;
  22.     }
  23.    
  24.     var connection = request.accept('echo-protocol', request.origin);
  25.     console.log('Connection accepted.');
  26.     connection.on('message', function(message) {
  27.       if (message.type === 'utf8') {
  28.         const reqData = JSON.parse(message.utf8Data);
  29.         reqData.test -= 1;
  30.         connection.sendUTF(JSON.stringify(reqData));
  31.       }
  32.     });
  33.     connection.on('close', function() {
  34.       console.log('close');
  35.     });
  36. });
复制代码
八、nginx署理跨域


原理:同源策略是欣赏器的安全策略,不是HTTP协议的一部门。服务器端调用HTTP接口只是使用HTTP协议,不存在超过标题。

实现:通过nginx设置署理服务器(域名与test1雷同,端口不同)做跳板机,反向署理访问test2接口,且可以修改cookie中test信息,方便当前域cookie写入,实现跨域登录。
nginx详细设置:
  1. #proxy服务器
  2. server {
  3.     listen       81;
  4.     server_name  www.test1.com;
  5.     location / {
  6.         proxy_pass   http://www.test2.com:8080;  #反向代理
  7.         proxy_cookie_test www.test2.com www.test1.com; #修改cookie里域名
  8.         index  index.html index.htm;
  9.         add_header Access-Control-Allow-Origin http://www.test1.com;  #当前端只跨域不带cookie时,可为*
  10.         add_header Access-Control-Allow-Credentials true;
  11.     }
  12. }
复制代码
到此这篇关于js前端办理跨域的八种实现方案的文章就先容到这了,更多相干js 跨域内容请搜索草根技术分享从前的文章或继承欣赏下面的相干文章希望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作