二十五、js如何实现跨域？聊一聊你之前用到过的方法

麦齐
117 阅读10分钟

一、同源策略

使用过 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 跨域获取数据已经成功了，但是通过这种方式也存在着一定的优缺点：

优点：

  1. 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制

  2. 兼容性很好，在古老的浏览器也能很好的运行

  3. 不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。

缺点：

  1. 它支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。

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

封装jsonp请求


function jsonp(url) {

return new Promise ((resolve, reject) => {

function callback (data) {

resolve(data)

}

window.onload = functtion() {

let script = document.createElement('script')

script.setAttribute('type', 'text/javascript')

script.src = url

document.body.appendChild(script)

}

window.onerror = function(err) {

reject(err)

}

})

}

jsonp(api).then(res=>handle(res))

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 的优缺点：

  1. 使用简单方便，更为安全

  2. 支持 POST 请求方式

  3. CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上

3、Server Proxy

服务器代理，顾名思义，当你需要有跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后将最后获取到的结果发送给你。

假设有这样的一个场景，你的页面需要获取 CNode：Node.js专业中文社区 论坛上一些数据，如通过 cnodejs.org/api/v1/topi…，但是因为不同域，所以你可以将请求交给后端处理，让其对该请求代为转发。

首先前端先创建一个 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 的时候，服务器收到请求，会代你发送请求到 cnodejs.org/api/v1/topi… 最后将获取到的数据发送给浏览器。

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

跨域请求成功。

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

4、location.hash

在 url 中，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 值也已经改变。

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

  1. 数据直接暴露在了 url 中

  2. 数据容量和类型都有限等等

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 的办法来解决，具体做法是可以在 www.example.com/a.html 和 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。

最后打开浏览器访问 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)根目录上

avatar
文章
阅读
粉丝