前端常见的跨域解决方案_大嘴蝠的博客-程序员秘密

技术标签: 跨域  前端  

前言

跨域对于前端来说绝对是一个熟悉的词,在实际的项目中遇到也会经常遇到,但是跨域的解决方法多种多样,所以就来总结一下基本的跨域方法。

什么是跨域

跨域一词从字面上来看就是跨域名,但实际上跨域名并不是理解的那么狭隘,其实际上只要是协议、域名、端口有任何一个不同,都会被当做是不同的域。之所以会存在跨域的问题,主要是为了保障浏览器的安全,但是这也对前端的工作造成了不少的麻烦,所以我们要通过一些方法使本域的 js 能够操作其它域的页面对象或者使其它域的 js 能操作本域的页面对象,介绍具体方法之前先说明一下到底什么算是同域

URL 说明 是否允许通信
http://www.example.com/a.js;http://www.example.com/b.js 同一域名,不同文件或路径 允许
http://www.example.com:8000/a.js;http://www.example.com/b.js 同一域名,不同端口 不允许
http://www.example.com/a.js;https://www.example.com/b.js 同一域名,不同协议 不允许
http://www.example.com/a.js;http://192.168.2xx.2x/b.js 域名和域名对应的 ip 不允许
http://www.example.com/a.js;http://x.example.com/b.js;http://domain.com/c.js 主域名相同,子域名不同 不允许
http://www.example.com/a.js;http://www.demo.com/b.js 不同域名 不允许

跨域解决方案

通过 jsonp 跨域

通常为了减轻 web 服务器的负载,我们会把 js、css、img 等静态资源分离到另一台独立域名的服务器上,在 html 页面中再通过相应的标签从不同域名下加载静态资源,这是被浏览器所允许的,借助此原理,我们可以通过动态创建 script,再请求一个带参数的网址实现跨域通信。
(1) 原生实现

<script>
	var script = document.createElement('script'); 
	script.type = 'text/javascript';
	// 传参并指定回调函数 onBack
    script.src = 'http://www.domain.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
   // 执行回调函数
   function onBack(res){
     
     alert(JSON.stringify(res));
   };
</script>

服务端返回如下

onBack({
     "status":true,"user":"admin"});

(2) jquery ajax

$.ajax({
     
   url:'http://www.domian.com:8080/login',
   type:'get',
   dataType:'jsonp',                  // 请求方式为 jsonp
   jsonpCallback:'onBack',      // 自定义回调函数名
   data:{
     }
});

(3) vue

this.$http.jsonp('http://www.domian.com:8080/login',{
     
   params:{
     },
   jsonp:'onBack'
}).then((res) =>{
     
   console.log(res);
})

后台 node.js 代码实例:

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

sever.on('request',function(req.res){
     
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    res.writeHead(200,{
     'Content-Type':'text/javascript'});
    res.write(fn+'(''+ JSON.stringify(params)+ ')');

   res.end();
});
server.listen('8080');
console.log('server is running at port 8080 ......');

注:jsonp 的缺点是只能实现 get 请求

通过 document.domain + iframe 跨域

注:此方案仅限于主域相同,子域不同的应用场景(我几乎没用过)
实现原理:两个页面都通过 js 强制设置 document.domain 为基础主域,就实现同域

(1) 父窗口(www.domain.com/b.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = "domain.com";
    var user = "admin";
</script>

(2) 子窗口(child.domain.com/b.html)

<script>
    document.domain = "domain.com";
    console.log("get js data from parent --->" + window.parent.user);
</scrip>
通过 location.hash + iframe 跨域

实现原理:a 欲与 b 跨域相互通信,可以通过中间页 c 来实现。三个页面,不同域之间利用 iframe 的 location.hash 传值,相同域之间直接访问 js 来进行同行。

具体实现:A 域:a.html -> B 域:b.html -> A 域:c.html ,a 与 b 不同域只能使用 hash 值进行单向通信,b 与 c 也不同域所以也只能通过 hash 值单向通信,但是 c 与 a 同域可以通过 parent.parent 访问 a 的所有内容。

(1) a.html (www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none"></iframe>
<script>
    var iframe = document.getElementById("iframe");
    // 向 b.html 添加 hash 值
    setTimeout(function(){
     
        iframe.src = iframe.src + "#user = admian";
    },1000);
   // 开放给 c.html 的回调方法
   function callBack(res){
     
       alert("data from c.html" + res);
   };
</script>

(2) b.html(www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none"></iframe>
<script>
    var iframe = document.getElementById("iframe");
    // 获取 a 传来的 hash 值之后将其传给 c
    window.onhashchange =  function () {
     
        iframe.src = iframe.src + location.hash;
    };
</script>

(3) c.html(www.domain1.com/c.html)

<script>
    window.onhashchange = function(){
     
        window.parent.parent.callBack("hello" + location.hash.replace("#user=",""));
    };
</script>
通过 window.name + iframe 跨域

window.name 属性的独特之处在于:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)

(1) a.html(www.domain1.com/a.html)

<script>
   var proxy = function(url,callback){
     
       var state = 0;
       var iframe = document.createElement('iframe');
       // 加载跨域页面
       iframe.src = url;
       // onload 事件会触发 2 次,第一次加载跨域页,并留存数据于 window.name
       iframe.onload = function(){
     
          if(state == 1){
     
              // 第二次 onload(同域 proxy 页)成功后,读取同域 window.name 中数据
              callback(iframe.contentWindow.name);
              destoryFrame();
          }else if(state == 0){
     
              // 第一次 onload (跨域页)成功后,切换到同域代理页面
              iframe.contentWindow.location = "http://www.domain1.com/proxy.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)
   });
</script>

(2) proxy.html(www.domain1.com/proxy.html)

中间代理页,与 a.html 同域,内容为空即可

(3) b.html(www.domain2.com/b.html)

<script>
   window.name = "This is domain2 data!";
</script>
通过 postMessage 跨域

postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API,且是为数不多的可以进行跨域操作的 window 属性之一,它可用于解决以下方面的问题:
a、页面和其打开的新窗口的数据传递
b、多窗口之间的数据传递
c、页面与嵌套的 iframe 消息的传递
d、上面三个场景的跨域数据传递

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

(1) a.html(www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="dispaly:none"></iframe>
<script>
   var iframe = document.getElementById("iframe");
   iframe.onload = function(){
     
       var data = {
     
          name:"aym"
       };
       // 向 domain2 中传送跨域数据
       iframe.contentWindow.postMessage(JSON.stringify(data),'http://www.domain2.com");
   };
   window.addEventListener('message',function(e){
     
       alert('data from domain2'+e.data)
   },false);
</script>

(2) b.html(www.domain2.com/b.html)

<script>
   window.addEventListener('message',function(e){
     
       alert('data from domain1' + e.data);
       var data = JSON.parse(e.data);
       if(data){
     
           data.number = 10;
           // 处理后在发回给 domain1
            window.parent.postMessage(JSON.stringify(data),'http://www.domain1.com');
       };
   },false);
</script>
跨域资源共享 (CORS)

普通跨域请求:只服务端设置 Access-Control-Allow-Origin 即可,前端无需设置。
带 cookie 请求:前后端都需要设置字段,另外需要注意,所带的 cookie 为跨域请求接口所在域的 cookie,而非当前页。
目前,所有浏览器都支持该功能(IE8+:IE8/9 需要使用 XDomainRequest 对象来支持 CORS),CORS 也已经成为主流的跨域解决方案。

(1) 前端设置

原生 ajax

var xhr = new XMLHttpRequest();   // IE8/9 需用 window.XDomainRequest 兼容
// 前端设置是否带 cookie
xhr.withCredentials = true;

xhr.open('post','http://www.domain2.com:8080/login',true)
xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
xhr.send('user = admin');
xhr.onreadystatechange = function(){
     
    if(xhr.readyState == 4 && xhr.status == 200){
     
        alert(xhr.responseText);
    };
};

jQuery ajax

$.ajax({
     
    .....
     xhrFields:{
     
         withCredentials: true;    // 前端设置是否带 cookie
     },
     crossDomain: true,     // 会让请求投中包含跨域的额外信息,但不会包含 cookie
})

vue 框架在 vue-resource 封装的 ajax 组件中加入以下代码

Vue.http.options.credentials = true;

(2) 服务端设置

Nodejs 后台设置

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

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-Orign':'http://www.domain1.com',  // 允许访问的域
            'Set-Cookie':'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'    // HttpOnly : 脚本无法读取 cookie
        });

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

server.listen('8080');
console.log('Server is running at port 8080....');
nginx 代理跨域

nginx 配置解决 iconfont 跨域

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

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

nginx 反向代理接口跨域

跨域原理:同源策略是浏览器的安全策略,不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议,不会执行 JS 脚本,不需要同源策略,也就不存在跨域问题。

实现思路:通过 nginx 配置一个代理服务器(域名与 domain1 相同,端口不同)做跳板机,反向代理访问 domain2 接口,并且可以顺便修改 cookie 中的 domain 信息,方便当前域 cookie 写入,实现跨域登录。

(1) nginx 具体配置

proxy 服务器

server {
     
    listen    81;
    server_name    www.domain1.com;
    
    location / {
     
        proxy_pass     http://www.domain2.com:8080;   # 反向代理
        proxy_cookie_domian    www.domain2.com    www.domain1.com;    # 修改 cookie 中的域名
        index    index.html    index.htm;

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

前端代码示例

var xhr = new XMLHttpRequest();

// 前端开关:浏览器是否读写 cookie
xhr.withCreadentiials = true;

// 访问 nginx 中的代理服务器
xhr.open('get','http://www.domain1.com:81/?user=admin',true);
xhr.send();

Nodejs 后台示例

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=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });
   
    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...')
Nodejs 中间件代理跨域

node 中间件实现跨域代理,原理大致与 nginx 相同,都是通过设置一个代理服务器,去实现数据的转发。

非 vue 框架的跨域(2次跨域)

利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器。

(1) 前端代码示例

var xhr = new XMLHttpRequest();

// 前端开关:浏览器是否读写 cookie
xhr.withCredentials = true;

// 访问 http-proxy-middleware 代理服务器
xhr.open('get','http://domain1.com:3000/login?user=admin',true);
xhr.send();

(2) 中间件服务器

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/',proxy({
     
    // 代理跨域目标接口
    target:'http://www.domain2.com:8080',
    changeOrigin:true,

   // 修改响应头信息,实现跨域并允许携带 cookie
   onProxyRes:function(proxyRes,req,res){
     
       res.header('Access-Control-Allow-Origin','http://www.domain1.com');
       res.header('Access-Control-Allow-Credentials','true');
   },

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

app.listen(3000);
console.log('Proxy server is listen at port 3000....');

(3) Nodejs 后台同 nginx

vue 框架的跨域(1次跨域)

利用 node + webpack + webpack -dev-server 代理接口跨域。在开发环境下,由于 vue 渲染服务和接口代理服务都是 webpack-dev-server 同一个,所以页面与代理接口之间不再跨域,无须设置 headers 跨域信息。

webpack.config.js 部分配置

module.exports = {
     
    entry:{
     },
    module:{
     },
    ....
    devServer:{
     
        historyApiFallBack: true,
        proxy:[{
     
           context:'/login',
           target:'http://www.domain2.com:8080',   // 代理跨域目标接口
           changeOrigin: true,
           cookieDomainRewrite:'www.domain1.com'    // 可以为 false,表示不修改
         }],
         noInfo:true
    }
}
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.domain2.com:8080');

// 连接成功的处理
socket.on('connect',function(){
     
    // 监听服务端消息
    socket.on('message',function(msg){
     
        console.log('data from server: --->' + msg);
    });

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

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

(2) Nodejs scoket 后台

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('hello:' + msg);
        console.log('data from client: -->' + msg);
    });

    // 断开处理
    client.on('disconnect',function(){
     
        console.log('Client socket has closed');
    });
})
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39749820/article/details/82958930

智能推荐

百度地图离线开发demo(初始化地图)_oliver666666的博客-程序员秘密_百度地图初始化

使用百度地图api,只要瓦片对应上,api对上了,地图的使用还是较为简单的,demo官网上的也可参考,只需将BMapGL后边的gl去掉即可&lt;!--地图初始化 --&gt;&lt;template&gt; &lt;div id="allmap" style="width: 100%;height: 100%;" /&gt;&lt;/template&gt;&lt;script&gt;export default { components: {}..

opencv和HALCON坐标系的不同_冯相文要加油呀的博客-程序员秘密

opencv的坐标原点在左上角,往右为X轴正方向,往下为Y轴正方向(用Image Watch可以很容易看出来)HALCON的坐标原点在左上角,往右为Y轴正方向,往下为X轴正方向(HALCON窗口左下角可以出来)

Python自学之路:第二课_MIYAGI_Desu的博客-程序员秘密

第2课0. 什么是BIF?BIF 就是 Built-in Functions,内置函数。为了方便程序员快速编写脚本程序(脚本就是要编程速度快快快!!!),Python 提供了非常丰富的内置函数,我们只需要直接调用即可,例如 print() 的功能是“打印到屏幕”,input() 的作用是接收用户输入(注:Python3 用 input() 取代了 Python2 的 raw_input(),用法如有不懂请看视频讲解)。太多BIF学不过来怎么办?看不懂英文说明怎么办?Python3的资料太少怎么办?没事

MemCache详解_Quiet_boy的博客-程序员秘密

MemCache是什么MemCache是一个自由、源码开放、高性能、分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度。MemCaChe是一个存储键值对的HashMap,在内存中对任意的数据(比如字符串、对象等)所使用的key-value存储,数据可以来自数据库调用、API调用,或者页面渲染的结果。

apiDoc 详解 api接口文档生成_Dom_留声机的博客-程序员秘密_apidoc

PHP使用apiDoc api接口文档安装apidocapidoc 命令参数列表配置(apidoc.json)apidoc.json配置项apidoc注释参数@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@apiHeaderExam...

android api 和版本对应表汇总_AaVictory.的博客-程序员秘密_android api版本对应

Android历代版本的命名:我们都是知道,安卓系统的历来的名称都是很有意思的,下面无限互联Android培训的老师归纳了一下:Android在正式发行之前,最开始拥有两个内部测试版本,并且以著名的机器人名称来对其进行命名,它们分别是:阿童木(AndroidBeta),发条机器人(Android1.0)。后来由于涉及到版权问题,谷歌将其命名规则变更为用甜点作为它们系统版本的代号的命名方法。甜点命名法开始于Android1.5发布的时候。作为每个版本代表的甜点的尺寸越变越大,然后按照26个字母数序:

随便推点

PCL学习笔记(一)_weixin_33857230的博客-程序员秘密

由于项目需要,开始学习一下HP公司的PCL打印语言,发现这方面的中文资料非常少,我做下记录也为后人提供便利。关于PCL的介绍可以参考wiki百科http://zh.wikipedia.org/zh-cn/PCL相关文档也可以在此链接下载。我参考的是PCL 5E technical reference manual 主要做一下翻译工作。。。一、概述PCL ,是Printer Comm...

Tomcat内存优化第二篇 - 个别优化参数详解_路克森的博客-程序员秘密_tomcat内存优化参数

博主个人主页前言今天我们接着来说tomcat这部分的小知识哦 上一篇我们提到了如何设置我们tomcat的内存大小 这一篇主要来说一下tomcat的优化思路 以及如何能够让tomcat抗住并发呢?开发众所周知 我们一个完整的系统肯定不是一个单体应用就能扛得住的 在大并发的压迫下 如果我们的程序还是个单机系统 那肯定会会快就挂了 所以我们就不得不做出改变 那么常见的tomcat优化或者说高可用...

科大讯飞指定录音文件转文字(异步)_XStorms的博客-程序员秘密_科大讯飞录音文件转文字

/** * 指定录音文件转文字(异步) * @param bo * @return */ @Override public JSONObject recognizeAudio(QueryRecognizeBo bo){ Map&lt;String,Object&gt; recordMap = extLxccCdrMapper.queryRelativePath(bo.getCallId()); String fileP.

优雅地处理运行时权限请求_rain9155的博客-程序员秘密

前言从android 6.0(API 级别 23)开始,android引入了运行时权限,用户开始在应用运行时向其授予权限,而不是在应用安装时向其授予权限,如果应用的某项功能需要使用到受运行时权限保护的资源(例如相机、位置、麦克风等),但在运行该功能前没有动态地申请相应的权限,那么在调用该功能时就会抛出SecurityException异常, android 6.0已经推出了很多年了,相信大家对于运行时权限的申请过程已经非常的熟悉,但是android的运行时权限的申请过程一直都是非常的繁琐的,主要有两步:

视频播放的心得体会(一)_JackLee18的博客-程序员秘密

  最近在做短视频播放的应用,为了实现比较好的交互体验,这边用到了缓存,预缓存处理。我这边用到的播放器是SJBaseVideoPlayer 这个库。首先要向这个开源库的作者表示感谢,感谢他贡献自己劳动成果。  在实际应用中,我主要对播放器划分了三个层,交互控制层,播放层,缓存处理层。交互控制层  交互控制层,主要就是根据产品的需求做出对应的交互效果,UI效果。这边会因为具体的业务需求而经常发...

推荐文章

热门文章

相关标签