跨域

作者: DCbryant | 来源:发表于2017-08-02 01:17 被阅读34次

深入跨域问题(3) - 利用 JSONP 解决跨域
关于设置env等环境变量的思考
Web前后端跨域问题处理
跨域
跨域问题详解分析
跨域问题：好几种解决方案
ajax readystatus=0;status=0 报错
深入跨域问题(2) - 利用 CORS 解决跨域
响应头设置跨域和Spring注解跨域
浏览器跨域的那些事

本文介绍跨域的八种方法:

JSONP
只要说到跨域，就必须聊到 JSONP，JSONP全称为：JSON with Padding，可用于解决主流浏览器的跨域数据访问的问题。

Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便签可以进行跨域的请求：

html中script标签可以引入其他域下的js，不受同源策略的限制比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持
script标签：在页面中动态插入script，script标签的src属性就是后端api接口的地址；这样加载script标签脚本直接调用本地方法，而script标签会立即执行脚本，示例：getNews?callback=appendHtml
后端：后端需要解析callback参数值，并将该值和返回数据拼接。示例：res.send(req.query.callback + '(' + JSON.stringify(data) + ')')

后端页面：

app.get('/getNews',function(req,res){
    var news = [
        '123',
        '456',
        '789',
        '321',
        '654',
        '987',
        '753',
        '159',
        '852'
    ]
    var data = []
    for(var i=0;i<3;i++){
        var index = parseInt(Math.random() * news.length)
        data.push(news[index])
        news.splice(index,1)
    }
   
    var cb = req.query.callback
    var show = cb + '(' + JSON.stringify(data) + ')'
    console.log(show)
    if(cb){
        res.send(show)
    }else{
        res.send(data)
    }
})

前端页面：

<!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>
    <div class="container">
        <ul class="news">
            <li>233</li>
            <li>323</li>
            <li>332</li>
        </ul>
        <button class="change">换一组</button>
    </div>

    <script>
        let $ = (className) => document.querySelector(className)

        $('.change').addEventListener('click',function(){
            var script = document.createElement('script')
            script.src = 'http://localhost:8080/getNews?callback=appendHtml'
            document.head.appendChild(script)
            document.head.removeChild(script)
        })
        // appendHtml(["321","987","159"])
        function appendHtml(news){
            var html = ''
            for(var i=0;i<news.length;i++){
                html += '<li>' + news[i] + '</li>'
            }
            console.log(html)
            $('.news').innerHTML = html
        }
    </script>
</body>
</html>

优点：

它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
兼容性很好，在古老的浏览器也能很好的运行
不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。

缺点：

它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

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

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

首先前端先创建一个 index.html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS</title>
</head>
<body>
    <script>
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:3000', true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            alert(xhr.responseText);
        }
    }
    xhr.send(null);
    </script>
</body>
</html>

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

require('http').createServer((req, res) => {

    res.writeHead(200, {
    'Access-Control-Allow-Origin': 'http://localhost:8080'
    });
    res.end('这是你要的数据：1111');

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

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

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

CORS 的优缺点：

使用简单方便，更为安全
支持 POST 请求方式
CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上

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

document.domain(降域)

document.domain 的作用是用来获取/设置当前文档的原始域部分，例如：

// 对于文档 www.example.xxx/good.html
document.domain="www.example.xxx"

// 对于URI http://developer.mozilla.org/en/docs/DOM 
document.domain="developer.mozilla.org"

对于主域相同而子域不同的情况下，可以通过设置document.domain 的办法来解决，具体做法是可以在http://a.jirengu.com:8080/a.html和http://b.jirengu.com:8080/b.html之中设置document.domain = 'jirengu.com'

a.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>Document</title>
    <style>
        iframe{
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.jirengu.com:8080/a.html">
        </div>
        <iframe src="http://b.jirengu.com:8080/b.html"></iframe>
    </div>

    <script>
        // http://a.jirengu.com:8080/a.html
        document.querySelector('.main input').addEventListener('click',function(){
            console.log(this.value)
            window.frames[0].document.querySelector('input').value = this.value
        })
       document.domain = 'jirengu.com' 
    </script>
</body>
</html>

b.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>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <input id="input" type="text" placeholder="http://b.jirengu.com:8080/b.html">

    <script>
        document.querySelector('#input').addEventListener('click',function(){
            window.parent.document.querySelector('input').value = this.value
        })
        document.domain = 'jirengu.com'  //降域
    </script>
</body>
</html>

document.domain 的优点在于解决了主语相同的跨域请求，但是其缺点也是很明显的：比如一个站点受到攻击后，另一个站点会因此引起安全漏洞；若一个页面中引入多个 iframe，想要操作所有的 iframe 则需要设置相同的 domain。

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

location.hash
location.hash 是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。例如：

// 对于页面 http://example.com:1234/test.htm#part2
location.hash = "#part2"

同时，由于我们知道改变 hash 并不会导致页面刷新，所以可以利用 hash 在不同源间传递数据。

假设 github.io 域名下 a.html 和 shaonian.eu 域名下 b.html 存在跨域请求，那么利用 location.hash 的一个解决方案如下：

a.html 页面中创建一个隐藏的 iframe， src 指向 b.html，其中 src 中可以通过 hash 传入参数给 b.html
b.html 页面在处理完传入的 hash 后通过修改 a.html 的 hash 值达到将数据传送给 a.html 的目的
a.html 页面添加一个定时器，每隔一定时间判断自身的 location.hash 是否变化，以此响应处理

以上步骤中需要注意第二点：如何在 iframe 页面中修改父亲页面的 hash 值。由于在 IE 和 Chrome 下，两个不同域的页面是不允许 parent.location.hash 这样赋值的，所以对于这种情况，我们需要在父亲页面域名下添加另一个页面来实现跨域请求，具体如下：

假设 a.html 中 iframe 引入了 b.html, 数据需要在这两个页面之间传递，且 c.html 是一个与 a.html 同源的页面
a.html 通过 iframe 将数据通过 hash 传给 b.html
b.html 通过 iframe 将数据通过 hash 传给 c.html
c.html 通过 parent.parent.location.hash 设置 a.html 的 hash 达到传递数据的目的

location.hash 方法的优点在于可以解决域名完全不同的跨域请求，并且可以实现双向通讯；而缺点则包括以下几点：

利用这种方法传递的数据量受到 url 大小的限制，传递数据类型有限
由于数据直接暴露在 url 中则存在安全问题
若浏览器不支持 onhashchange 事件，则需要通过轮训来获知 url 的变化
有些浏览器会在 hash 变化时产生历史记录，因此可能影响用户体验

window.name
window.name的值不是一个普通的全局变量，而是当前窗口的名字，这里要注意的是每个 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 的话会报错。

WebSocket
WebSocket 协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

参考链接：

深入跨域问题(3) - 利用 JSONP 解决跨域
深入跨域问题(1) - 初识 CORS 跨域资源共享；深入跨域问题(2) - 利用 CORS 解决跨域深入跨域问题...
关于设置env等环境变量的思考
1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域前端本地处理跨域：代理线上跨域的处理方式：Nginx反向代...
Web前后端跨域问题处理
跨域问题有前台跨域（iframe间）和后台跨域。前台跨域的解决方案可以采用跨域文档通讯（Cross domain...
跨域
跨域什么是跨域: 解决跨域通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...
跨域问题详解分析
参考文档 CORS详解跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解跨域的那些事儿跨域与跨域...
跨域问题：好几种解决方案
跨域分为广义跨域和狭义跨域广义跨域：一个域下的文档或脚本试图去请求另一个域下的资源；广义跨域可以分为以下几种：...
ajax readystatus=0;status=0 报错
跨域跨域跨域一定要找运维或者后台解决
深入跨域问题(2) - 利用 CORS 解决跨域
阅读目录：深入跨域问题(1) - 初识 CORS 跨域资源共享；深入跨域问题(2) - 利用 CORS 解决跨域...
响应头设置跨域和Spring注解跨域
CORS跨域原理详解Spring解决跨域响应头设置跨域 Spring注解跨域@CrossOrigin 可添加到方...
浏览器跨域的那些事
整理中目标：了解跨域解决跨域服务器配置跨域（java, nginx) 前端调试时配置解决跨域一、什么是跨...

跨域

相关文章

深入跨域问题(3) - 利用 JSONP 解决跨域

关于设置env等环境变量的思考

Web前后端跨域问题处理

跨域

跨域问题详解分析

跨域问题：好几种解决方案

ajax readystatus=0;status=0 报错

深入跨域问题(2) - 利用 CORS 解决跨域

响应头设置跨域和Spring注解跨域

浏览器跨域的那些事

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读