跨域

关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。

3种跨全域方法：

1、JSONP

全称：JSON with Padding，可用于解决主流浏览器的跨域数据访问的问题。
Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便可以进行跨域的请求：（页面中两个script标签，其中一个是函数声明call，另一个是请求成功后的函数调用call()）

代码如下

html部分

<!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>跨域</title>
    <script src="index1.js"></script>
</head>

<body>
</body>

</html>

js部分，文件名为index1.js

//创建script标签，设置属性，将script标签添加到head中，至此head中有两个script标签
function loadScript(url) {
    var script = document.createElement('script')
    script.src = url
    script.type = 'text/javascript'
    var head = document.querySelector('head')
    head.appendChild(script)
}

//设置回调函数的函数声明
function jsonpCallback(data) {
    console.log(JSON.stringify(data))
}

loadScript('http://127.0.0.1:3000?callback=jsonpCallback')

后端逻辑，文件名为index2.js

var url = require('url')//获取url模块
var http = require('http')//获取http模块
http.createServer(function (req, res) {//创建服务器并监听127.0.0.1的3000端口
    //设置数据
    var data = {
        name: "dolby"
    };
    //url.parse()方法将一个url字符串转换为URL对象，true的意思是query 属性将始终设置为由 querystring 模块的 parse() 方法返回的对象（参考https://stackoverflow.com/questions/17184791/node-js-url-parse-and-pathname-property）。.query方法获取的是不含问号的参数键值对，callback为键名，不固定，只要前后端约定好就可以
    //所以callbackName为回调函数的名字，即前段index1.js文件中的jsonpCallback
    var callbackName = url.parse(req.url, true).query.callback
    //设置响应头为200，即OK状态，一般也要提前约定好，不能乱写
    res.writeHead(200)
    //res.end()即发送后端相应结果，${callbackName}为函数名，${JSON.stringify(data)}表示JSON字符串格式的实际参数，合起来为函数调用
    res.end(`${callbackName}(${JSON.stringify(data)})`)

}).listen(3000, '127.0.0.1')

//打印这句话只是方便在终端中查看代码是否生效
console.log('启动服务，监听 127.0.0.1:3000')
  • 前端先设置好回调函数，并将函数名作为url的参数；将此url插入到新创建的script标签的src属性中，并将此script标签添加到页面的head中
  • 服务端接收到请求后，通过该参数获得回调函数名jsonpCallback，并将js格式的数据作为函数调用的参数返回
  • 收到结果后因为是 script 标签，所以浏览器会当做是脚本运行，从而达到跨域获取数据的目的。

验证过程：

  • 通过node index2.js 在终端中启动服务，监听端口 3000，这样服务端就建立起来了
输入命令
打开http://127.0.0.1:3000
  • 我们通过端口号的不同来模拟跨域的场景，打开另一个终端窗口，在页面同目录下输入http-server
输入命令

通过端口8080来访问刚才的页面，相当于开启两个监听不同端口的 http 服务器，通过页面中的请求来模拟跨域的场景。打开浏览器，访问http://127.0.0.1:8080就可以看到从http://127.0.0.1:3000获取到的数据了。

打开http://127.0.0.1:8080

至此，通过 JSONP 跨域获取数据已经成功了，但这种跨域方式存在一定的优缺点：

  • 优点：
    • 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
    • 兼容性好，在古老的浏览器也能很好的运行
    • 不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
  • 缺点：
    • 只支持 GET 请求。
    • 历史原因遗留的bug，注定被淘汰
    • 只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题
    • 容易遭受XSS攻击，因为我们拿到的是对方接口的数据作为js执行，如果得到的是一个很危险js，获取了用户信息和cookies，这时执行了js就会出现安全问题。

2、CORS

CORS是一个W3C标准，全称：Cross-origin resource sharing，跨域资源共享。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。允许浏览器向跨源服务器发出 XMLHttpRequest 请求，克服了 ajax 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

代码如下

html部分

<!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>跨域</title>
    <script src="index1.js"></script>
</head>

<body>
</body>

</html>

js部分，文件名为index1.js

var xhr = new XMLHttpRequest()//1
xhr.open('GET', 'http://127.0.0.1:3000', true)//2
xhr.onload = function () {
    console.log(xhr.responseText)
}//4，因为onload(callback)是异步的，后执行
xhr.send()//3

这似乎跟一次正常的异步 ajax 请求没有什么区别，关键是在服务端收到请求后的处理：

后端逻辑，文件名为index2.js

var http = require('http')//获取http模块
http.createServer(function (req, res) {//创建服务器并监听127.0.0.1的3000端口
    //设置响应头为200，即OK状态，一般也要提前约定好，不能乱写,设置允许访问的白名单
    res.writeHead(200, {
        'Access-Control-Allow-Origin': 'http://127.0.0.1:8080'
    })
    res.end('hello,dolby')
}).listen(3000, '127.0.0.1')

//打印这句话只是方便在终端中查看代码是否生效
console.log('启动服务，监听 127.0.0.1:3000')

关键是在于设置响应头中的 Access-Control-Allow-Origin，该值要与请求头中 Origin 一致才能生效，否则将跨域失败。

红色框内的两个值必须相等

与JSONP一样，再次开启两个 http 服务器进程：

打开浏览器：

打开http://127.0.0.1:3000
打开http://127.0.0.1:8080

成功的关键在于 Access-Control-Allow-Origin 是否包含请求页面的域名，如果不包含的话，浏览器将认为这是一次失败的异步请求，将会调用 xhr.onerror 中的函数。

  • CORS 的优点：
    • 使用简单方便，更为安全
    • 支持 POST 请求方式
    • 精确控制资源访问权限
    • 客户端无需增加额外代码
  • 缺点：
    • CORS仅兼容 IE 10 以上

3、Server Proxy服务器代理

需要跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后将获取的结果发送给你。
假设你的页面需要获取 CNode：Node.js专业中文社区 论坛上一些数据，如通过 https://cnodejs.org/api/v1/topics，因为不同域，所以你可以请求后端让其代为转发请求

const url = require('url');
const http = require('http');
const https = require('https');
const server = http.createServer((req, res) => {
    const path = url.parse(req.url).path.slice(1);
    if(path === 'topics') {
    https.get('https://cnodejs.org/api/v1/topics', (resp) => {
        let data = "";
        resp.on('data', chunk => {
        data += chunk;
        });
        resp.on('end', () => {
        res.writeHead(200, {
            'Content-Type': 'application/json; charset=utf-8'
        });
        res.end(data);
        });
    })      
    }
}).listen(3000, '127.0.0.1');

console.log('启动服务，监听 127.0.0.1:3000');

通过代码你可以看出，当你访问http://127.0.0.1:3000时，服务器收到请求，会代你发送请求https://cnodejs.org/api/v1/topics，最后将获取到的数据发送给浏览器。
同样地开启服务:

打开浏览器访问http://localhost:3000/topics就可以看到:

跨域请求成功。

4种通过iframe跨域与其他页面通信的方式

1、location.hash:

在 url 中，http://www.baidu.com#helloworld的 #helloworld 就是 location.hash，改变 hash 值不会导致页面刷新，所以可以利用 hash 值来进行数据的传递，当然数据量是有限的。
假设 localhost:8080 下有文件 cs1.html 要和 localhost:8081 下的 cs2.html 传递消息，cs1.html 首先创建一个隐藏的 iframe，iframe 的 src 指向 localhost:8081/cs2.html，这时的 hash 值就可以做参数传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS1</title>
</head>
<body>
    <script>
    // http://localhost:8080/cs1.html
    let ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = "http://localhost:8081/cs2.html#data";
    document.body.appendChild(ifr);
        
    function checkHash() {
        try {
        let data = location.hash ? location.hash.substring(1) : '';
        console.log('获得到的数据是：', data);
        }catch(e) {

        }
    }
    window.addEventListener('hashchange', function(e) {
        console.log('获得的数据是：', location.hash.substring(1));
        });
    </script>
</body>
</html>

cs2.html 收到消息后通过 parent.location.hash 值来修改 cs1.html 的 hash 值，从而达到数据传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS2</title>
</head>
<body>
    <script>
    // http://locahost:8081/cs2.html
    switch(location.hash) {
        case "#data":
        callback();
        break;
    }
    function callback() {
    const data = "some number: 1111"
    try {
        parent.location.hash = data;
    }catch(e) {
        // ie, chrome 下的安全机制无法修改 parent.location.hash
        // 所以要利用一个中间的代理 iframe 
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://localhost:8080/cs3.html#' + data;     // 该文件在请求域名的域下
        document.body.appendChild(ifrproxy);
        }
       }
    </script>
</body>
</html>

由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于 localhost:8080 域名下的一个代理 iframe 的 cs3.html 页面

<script>
    parent.parent.location.hash = self.location.hash.substring(1);
</script>

之后老规矩，开启两个 http 服务器：

这里为了图方便，将 cs1,2,3 都放在同个文件夹下，实际情况的话 cs1.html 和 cs3.html 要与 cs2.html 分别放在不同的服务器才对。

之后打开浏览器访问 localhost:8080/cs1.html，注意不是 8081，就可以看到获取到的数据了，此时页面的 hash 值也已经改变。

缺点：

  • 数据直接暴露在了 url 中
  • 数据容量和类型都有限

2、window.name:

window.name（一般在 js 代码里出现）的值不是一个普通的全局变量，而是当前窗口的名字，要注意的是每个 iframe 都有包裹它的 window，而这个 window 是top window 的子窗口，而它自然也有 window.name 的属性，window.name 属性的神奇之处在于 name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。

举个简单的例子：你在某个页面的控制台输入：

window.name = "Hello World";
window.location = "http://www.baidu.com";

页面跳转到了百度首页，但是 window.name 却被保存了下来，还是 Hello World，跨域解决方案似乎可以呼之欲出了：

首先创建 a.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    let data = '';
    const ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/b.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
        ifr.onload = function() {
            data = ifr.contentWindow.name;
        console.log('收到数据:', data);
        }
        ifr.src = "http://localhost:8080/c.html";
    }
    </script>
</body>
</html>

再创建 b.html 文件：

<script>
   window.name = "你想要的数据!";
</script>

http://localhost:8080/a.html在请求远端服务器http://localhost:8081/b.html的数据，我们可以在该页面下新建一个 iframe，该 iframe 的 src 属性指向服务器地址(利用 iframe 标签的跨域能力)，服务器文件 b.html 设置好 window.name 的值。
但是由于 a.html 页面和该页面 iframe 的 src 如果不同源的话，则无法操作 iframe 里的任何东西，所以就取不到 iframe 的 name 值，所以我们需要在 b.html 加载完后重新换个 src 去指向一个同源的 html 文件，或者设置成'about:blank;' 都行，这时候我只要在 a.html 相同目录下新建一个 c.html 的空页面即可。如果不重新指向 src 的话直接获取的 window.name 的话会报错：

老规矩，打开两个 http 服务器：

打开浏览器就可以看到结果：

3、postMessage:

postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能。

首先创建 a.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
    <script>
    window.onload = function() {
        let targetOrigin = 'http://localhost:8081';
        window.frames[0].postMessage('我要给你发消息了!', targetOrigin);
    }
    window.addEventListener('message', function(e) {
        console.log('a.html 接收到的消息:', e.data);
    });
    </script>
</body>
</html>

创建一个 iframe，使用 iframe 的一个方法 postMessage 可以向http://localhost:8081/b.html发送消息，然后监听 message，可以获得其他文档发来的消息。
同样的 b.html 文件：

<script> 
window.addEventListener('message', function(e) { 
    if(e.source != window.parent) { 
        return; 
    } 
    let data = e.data;
    console.log('b.html 接收到的消息:', data); 
    parent.postMessage('我已经接收到消息了!', e.origin); });
</script>

同样的开启 http 服务器，在一个终端下执行http-server并在浏览器中打开http://127.0.0.1:8080/a.html，开启另一个终端执行http-server并在浏览器中打开http://127.0.0.1:8081/b.html，效果如下

4、document.domain降域:

对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决，具体做法是可以在 http://www.example.com/a.html和http://sub.example.com/b.html两个文件分别加上 document.domain = "a.com"；然后通过 a.html 文件创建一个 iframe，去控制 iframe 的 window，从而进行交互，当然这种方法只能解决主域相同而二级域名不同的情况，如果你异想天开的把 script.example.com 的 domain 设为 qq.com 显然是没用的，那么如何测试呢？
测试的方式稍微复杂点，需要安装 nginx 做域名映射，如果你电脑没有安装 nginx，请先去安装一下: nginx news
先创建一个 a.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    document.domain = 'example.com';
    let ifr = document.createElement('iframe');
    ifr.src = 'http://sub.example.com/b.html';
    ifr.style.display = 'none';
    document.body.append(ifr);
    ifr.onload = function() {
        let win = ifr.contentWindow;
        alert(win.data);
    }
    </script>
</body>
</html>

再创建一个 b.html 文件：

<script>
    document.domain = 'example.com';
    window.data = '传送的数据：1111';
</script>

同样的开启 http 服务器，在浏览器中打开：
这时只是开启了两个 http 服务器，还需要通过 nginx 做域名映射，将Example Domain映射到 localhost:8080，sub.example.com 映射到 localhost:8081 上
打开操作系统下的 hosts 文件：mac 是位于 /etc/hosts 文件，并添加：

127.0.0.1 www.example.com
127.0.0.1 sub.example.com

这样在浏览器打开这两个网址后就会访问本地的服务器。
之后打开 nginx 的配置文件：/usr/local/etc/nginx/nginx.conf，并在 http 模块里添加：

server {
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://127.0.0.1:8080/;
    }
}
server {
    listen 80;
    server_name sub.example.com;
    location / {
        proxy_pass http://127.0.0.1:8081/;
    }
}

上面代码的意思是：如果访问本地的域名是Example Domain就由 localhost:8080 代理该请求。
所以我们这时候在打开浏览器访问Example Domain的时候其实访问的就是本地服务器 localhost:8080。

参考资料:

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • 前端跨域的处理
    由于浏览器的同源策略保护机制，浏览器不能执行来自其他来源的脚本。通过js在不同的域之间进行数据传输或通信，比如用a...
    威少_吴阅读 1,373评论 0赞 2
  • 前端常见跨域解决方案（全）
    什么是跨域？ 2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,363评论 0赞 5
  • 跨域
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    w_zhuan阅读 510评论 0赞 0
  • 跨域问题
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    他在发呆阅读 822评论 0赞 0
  • 阴差阳错(二十三)
    文 /南岸风云 全目录 /阴差阳错 上一章/阴差阳错(二十二) （二十三） 救护车来了，天津子进...
    南岸风云阅读 327评论 0赞 4