25_js如何实现跨域？聊一聊你之前用到过的方法

作者: 沐向 | 来源:发表于2020-04-21 15:56 被阅读0次

一、同源策略

使用过 Ajax 的同学都知道其便利性，可以在不向服务器提交完整的页面的情况下，实现局部更新页面。但是浏览器处于对安全方面的考虑，不允许跨域调用其他页面的对象，这对于我们在注入 iframe 或是 ajax 应用上带来不少麻烦。

简单说来，只有当协议，域名，端口相同的时候才算是同一个域名，否则均认为需要做跨域的处理。

二、跨域方法

介绍七种常用跨域的方式，关于跨域大概可以分为纯粹的跨全域请求和 iframe 的跨域。最后了解一下flash跨域策略。

下面就先介绍三种跨全域的方法：

1、JSONP

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

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

首先前端先设置好回调函数，并将其作为 url 的参数。
服务端接收到请求后，通过该参数获得回调函数名，并将数据放在参数中将其返回
收到结果后因为是 script 标签，所以浏览器会当做是脚本进行运行，从而达到跨域获取数据的目的。

实例：

后端逻辑：

//server.js
const url = require('url');
    
require('http').createServer((req, res) => {
    const data = {
        x: 10
    };
    const callback = url.parse(req.url, true).query.callback;
    res.writeHead(200);
    res.end(`${callback}(${JSON.stringify(data)})`);

}).listen(3000, '127.0.0.1');

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

通过 node server.js 启动服务，监听端口 3000，这样服务端就建立起来了

前端页面：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP跨域</title>
</head>
<body>
    <script>
    function jsonpCallback(data) {
        alert('获得 X 数据:' + data.x);
    }
    </script>
    <script src="http://127.0.0.1:3000?callback=jsonpCallback"></script>
</body>
</html>

逻辑已经写好了，那如何来模拟一个跨域的场景呢？

这里我们通过端口号的不同来模拟跨域的场景，通过 http://127.0.0.1:8080 端口来访问页面。先通过 npm 下载 http-server 模块：

npm install -g http-server

并且在页面同目录下输入：

http-server -p 8080

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

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

优点：

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

缺点：

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

2、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://127.0.0.1:8080'
    });
    res.end('这是你要的数据：1111');

}).listen(3000, '127.0.0.1');

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

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

接下来再次开启两个 http 服务器进程：

打开浏览器访问 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，但是因为不同域，所以你可以将请求交给后端处理，让其对该请求代为转发。

首先前端先创建一个 index.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>Server Proxy</title>
</head>
<script>
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:3000/topics', true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            const result = JSON.parse(xhr.responseText);
            if (result.success) {
                let str = ''
                result.data.forEach(function(item){
                        str+='<h2>'+item.title+'</h2>';
                        str+=item.content;
                })
                document.write(str);
            }
        }
    }
    xhr.send(null);
</script>
</html>

后端代码如下：

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, {
                    'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
                    '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:8080 的时候，服务器收到请求，会代你发送请求到 https://cnodejs.org/api/v1/topics 最后将获取到的数据发送给浏览器。

打开浏览器访问 http://127.0.0.1:8080，就可以看到

跨域请求成功。

纯粹的跨全域请求的方式已经介绍完了，另外介绍四种通过 iframe 跨域与其它页面通信的方式。

4、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://127.0.0.1:8080/cs1.html
    let ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = "http://127.0.0.1:8081/cs2.html#data";
    document.body.appendChild(ifr);
        
    window.addEventListener('hashchange', function(e) {
        let data = location.hash ? location.hash.substring(1) : '';
        console.log('获得的数据是：', decodeURIComponent(data));
    });
</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://127.0.0.1:8081/cs2.html
    switch(location.hash) {
        case "#data":
        callback();
        break;
    }
    function callback() {
        const data = "hash跨域传值"
        try {
            parent.location.hash = encodeURIComponent(data);
        } catch(e) {
            // ie, chrome 下的安全机制无法修改 parent.location.hash
            // 所以要利用一个中间的代理 iframe 
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'http://127.0.0.1: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>

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

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

当然这种方法存在着诸多的缺点：

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

5、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://127.0.0.1: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://127.0.0.1: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 的空页面即可。

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

6、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://127.0.0.1:8081/b.html" style='display: none;'></iframe>
    <script>
    window.onload = function() {
        let targetOrigin = 'http://127.0.0.1:8081';
        window.frames[0].postMessage('我要给你发消息了!', targetOrigin);
    }
    window.addEventListener('message', function(e) {
            if (e.data) { 
                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>

打开浏览器同样可以看到：

7、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

先创建一个 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 做域名映射，将 www.example.com 映射到 127.0.0.1:8080，sub.example.com 映射到 127.0.0.1:8081 上。
打开操作系统下的 hosts 文件：windows 是位于 C:\Windows\System32\drivers\etc 文件，并添加：

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

这样在浏览器打开这两个网址后就会访问本地的服务器。

之后打开 nginx 的配置文件：G:\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/;
    }
}

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

最后打开浏览器访问 http://www.example.com/a.html 就可以看到结果：

8、Flash跨域策略

（1）简介

flash在跨域时唯一的限制策略就是crossdomain.xml文件，该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据。

位于www.a.com域中的swf文件要访问www.b.com的文件时，swf首先会检查www.b.com服务器目录下是否有crossdomain.xml文件，如果没有，则访问不成功；若crossdomain.xml文件存在，且里边设置了允许www.a.com域访问，那么通信正常。所以要使Flash可以跨域传输数据，其关键就是crossdomain.xml。

（2）示例

问题：Flash放在a.domain.com上，后台脚本放在b.domain.com上，即使在同主域下也不能进行跨域访问。

原因：由于flash采用完全域匹配规则，所以无法访问另一个域的数据。

解决：

无须对Flash做任何处理，只要在目标域b.domain.com的根目录上放入一个策略文件crossdomain.xml即可。
Flash访问另一个域的数据，flash player 会自动从目标域根域加载策略文件crossdomain.xml。
如果访问的数据所在的域在策略文件中，则数据将可访问。

具体解决方式：

1. 建立文件：crossdomain.xml

<?xml version="1.0"?>  
<!--http://example.com/crossdomain.xml-->  
<cross-domain-policy>  
   <allow-access-from domain="www.example.com" />       <!--只允许主域访问-->
   <allow-access-from domain="sub.example.com" />       <!--只允许二级域sub.example访问-->
   <allow-access-from domain="*.example.com" />         <!--允许所有域访问-->
   <allow-access-from domain="*" />                     <!--无访问限制-->
</cross-domain-policy>

2. 把文件crossdomain.xml放入被Flash访问的域(b.domain.com)根目录上

25_js如何实现跨域？聊一聊你之前用到过的方法

一、同源策略

二、跨域方法

1、JSONP

2、CORS

3、Server Proxy

4、location.hash

5、window.name

6、postMessage

7、document.domain

8、Flash跨域策略

（1）简介

（2）示例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读