저는 연구에서 크로스 도메인 관련 콘텐츠를 자주 봅니다. 이 기사에서는 스타 영역에 대한 크로스 도메인 솔루션을 제공합니다.
교차 도메인 솔루션
1. jsonp를 통한 교차 도메인
2. document.domain + iframe 교차 도메인
3. window.name + iframe 교차 도메인
5. domain
6. 교차 도메인 리소스 공유(CORS)
7, nginx 프록시 교차 도메인
8, nodejs 미들웨어 프록시 교차 도메인
9, WebSocket 프로토콜 교차 도메인
1. 일반적으로 jsonp를 통한 교차 도메인 웹 서버의 부하를 줄이고 js를 넣습니다. css 및 img와 같은 정적 리소스는 독립적인 도메인 이름을 가진 다른 서버로 분리됩니다. 정적 리소스는 HTML 페이지의 해당 태그를 통해 다른 도메인 이름에서 로드되고 허용됩니다. 이 원칙에 따라 우리는 동적으로 스크립트를 생성한 다음 매개변수가 포함된 URL을 요청하여 도메인 간 통신을 달성할 수 있습니다.
1.) 기본 구현:
<script>
var script = document.createElement('script');
script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.domain2.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.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {}});3.）vue.js：
this.$http.jsonp('http://www.domain2.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();
server.on('request', function(req, res) {var params = qs.parse(req.url.split('?')[1]);
var fn = params.callback; // jsonp返回设置 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 요청만 구현할 수 있습니다. .
2. document.domain + iframe 교차 도메인이 솔루션은 기본 도메인은 동일하지만 하위 도메인은 다른 도메인 간 애플리케이션 시나리오로 제한됩니다.
구현 원칙: 두 페이지 모두 js를 통해 document.domain을 기본 기본 도메인으로 강제 설정하여 동일한 도메인을 달성합니다.
1.) 상위 창: (http://www.domain.com/a.html))
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe><script> document.domain = 'domain.com'; var user = 'admin';</script>
<script> document.domain = 'domain.com'; // 获取父窗口中变量 alert('get js data from parent ---> ' + window.parent.user);</script>
3. location.hash + iframe 교차 도메인 구현 원칙: a는 도메인을 넘어 b와 통신하기를 원하며 이는 중간 페이지 c를 통해 달성됩니다. 세 페이지의 경우 iframe의 location.hash를 사용하여 서로 다른 도메인 간 값을 전송하고, 동일한 도메인 간 통신을 위해 직접 js 액세스를 사용합니다.
구체적인 구현: 도메인 A: a.html -> 도메인 B: b.html -> 도메인 A: c.html 서로 다른 도메인 a와 b는 해시 값을 통해 단방향으로만 통신할 수 있습니다. 통신은 단방향으로만 가능하지만 c와 a는 동일한 도메인에 있으므로 c는 parent.parent를 통해 페이지의 모든 개체에 액세스할 수 있습니다.1.) a.html: ([http://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=admin';
}, 1000);2.) b.html: (http://www.domain2.com/b.html))
4.window.name + iframe 교차 도메인
window.name 속성의 고유성: 이름 값은 다른 페이지(또는 다른 도메인 이름) 후에도 여전히 존재합니다. 로드되며 매우 긴 이름 값(2MB)을 지원할 수 있습니다.
var proxy = function(url, callback) { var state = 0;
var iframe = document.createElement('iframe'); // 加载跨域页面 iframe.src = url;// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name iframe.onload = function() { if (state === 1) { // 第2次onload(同域proxy页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name);
destoryFrame();
}
else if (state === 0) {
// 第1次onload(跨域页)成功后，切换到同域代理页面 iframe.contentWindow.location = 'http://www.domain1.com/proxy.html'; state = 1;
}
};
document.body.appendChild(iframe);iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); }
};// 교차 도메인 B 페이지 데이터 프록시 요청('http://www.domain2.com/b.html', function(data){
Alert(data) ;
2.) Proxy.html: (http://www.domain1.com/proxy....) 중간 프록시 페이지는 a.html과 동일한 도메인에 있습니다. 내용은 비어 있을 수 있습니다.
3.) b.html: (http://www.domain2.com/b.html))
<script> window.name = 'This is domain2 data!';</script>
요약: iframe의 src 속성은 외부 도메인에서 로컬 도메인으로 전송되며, 크로스- 도메인 데이터는 iframe의 window.name에서 외부 도메인에서 로컬 도메인으로 전달됩니다. 이는 브라우저의 도메인 간 액세스 제한을 교묘하게 우회하는 동시에 안전한 작업입니다.
5. postMessage 크로스 도메인
사용법: postMessage(data, Origin) 메서드는 두 개의 매개변수 데이터를 허용합니다. HTML5 사양은 모든 기본 유형이나 복사 가능한 객체를 지원하지만 일부 브라우저는 문자열만 지원하므로 매개변수를 전달할 때 JSON.stringify() 직렬화를 사용하는 것이 가장 좋습니다. Origin: 프로토콜 + 호스트 + 포트 번호, "*"로 설정할 수도 있는데, 이는 현재 창과 동일한 출처를 지정하려는 경우 "/"로 설정합니다.
1.) a.html: (http://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');
iframe.onload = function() { var data = { name: 'aym' };// 向domain2传送跨域数据 iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com'); }; // 接受domain2返回数据 window.addEventListener('message', function(e) {
alert('data from domain2 ---> ' + e.data);
}, false);</script><script> // 接收domain1的数据 window.addEventListener('message', function(e) {
alert('data from domain1 ---> ' + e.data); var data = JSON.parse(e.data);
if (data) { data.number = 16;
// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com'); }
},
false);</script>六、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。
目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
1、 前端设置：
1.）原生ajax
// 前端设置是否带cookiexhr.withCredentials = true;
示例代码：
var xhr = new XMLHttpRequest();// IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookiexhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};2.）jQuery ajax
$.ajax({
...
xhrFields: {
withCredentials: true // 前端设置是否带cookie },
crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie ...
});
3.）vue框架在vue-resource封装的ajax组件中加入以下代码：
Vue.http.options.credentials = true
2、 服务端设置：
若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。
1.）Java后台：
/* * 导入包：import javax.servlet.http.HttpServletResponse; * 接口参数中定义：HttpServletResponse response */response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需写全（协议+域名+端口）response.setHeader("Access-Control-Allow-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-Origin': '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代理跨域
1、 nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。
location / {
add_header Access-Control-Allow-Origin *;
}
2、 nginx反向代理接口跨域
跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
nginx具体配置：
#proxy服务器server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
add_header Access-Control-Allow-Credentials true;
}
}1.) 前端代码示例：
var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
2.) 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相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
1、 非vue框架的跨域（2次跨域）
利用node + express + http-proxy-middleware搭建一个proxy服务器。
1.）前端代码示例：
var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问http-proxy-middleware代理服务器xhr.open('get', 'http://www.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）
2、 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.）前端代码：
<p>user input：<input type="text"></p><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() {
socket.send(this.value);};</script>2.）Nodejs socket后台：
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.');
});
});附：
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。但是有时候跨域请求资源是合理的需求，本文尝试从多篇文章中汇总至今存在的所有跨域请求解决方案。
跨域请求
首先需要了解的是同源和跨源的概念。对于相同源，其定义为：如果协议、端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。只要三者之一任意一点有不同，那么就为不同源。当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。而有关跨域请求受到限制的原因可以参考如下 MDN 文档片段：
跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。
解决方法汇总
以下我们由简及深介绍各种存在的跨域请求解决方案，包括 document.domain, location.hash, window.name, window.postMessage, JSONP, WebSocket, CORS
。
document.domain document.domain 的作用是用来获取/设置当前文档的原始域部分，例如： // 对于文档 www.example.xxx/good.htmldocument.domain="www.example.xxx"// 对于URI http://developer.mozilla.org/en/docs/DOM document.domain="developer.mozilla.org"
如果当前文档的域无法识别，那么 domain 属性会返回 null。
在根域范围内，Mozilla允许你把domain属性的值设置为它的上一级域。例如，在 developer.mozilla.org 域内，可以把domain设置为 "mozilla.org" 但不能设置为 "mozilla.com" 或者"org"。
因此，若两个源所用协议、端口一致，主域相同而二级域名不同的话，可以借鉴该方法解决跨域请求。
比如若我们在 a.github.io 页面执行以下语句：
document.domain = "github.io"
那么之后页面对 github.io
发起请求时页面则会成功通过对 github.io
的同源检测。比较直接的一个操作是，当我们在 a.github.io
页面中利用 iframe 去加载 github.io
时，通过如上的赋值后，我们可以在 a.github.io
页面中去操作 iframe 里的内容。
我们同时考虑另一种情况：存在两个子域名 a.github.io
以及 b.github.io
， 其中前者域名下网页 a.html 通过 iframe 引入了后者域名下的 b.html，此时在 a.html 中是无法直接操作 b.html 的内容的。
同样利用 document.domain
，我们在两个页面中均加入
document.domain='github.io'
这样在以上的 a.html 中就可以操作通过 iframe 引入的 b.html 了。
document.domain 的优点在于解决了主语相同的跨域请求，但是其缺点也是很明显的：比如一个站点受到攻击后，另一个站点会因此引起安全漏洞；若一个页面中引入多个 iframe，想要操作所有的 iframe 则需要设置相同的 domain。
location.hash
location.hash
是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。例如：
// 对于页面 http://example.com:1234/test.htm#part2location.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.bash 방법의 장점은 완전히 다른 도메인 이름을 사용하는 도메인 간 요청을 해결하고 양방향 통신이 가능하다는 점입니다. 단점은 다음과 같습니다.
이 방법을 사용하여 전송되는 데이터 양은 제한됩니다. URL 크기에 따라, 데이터 유형이 Limited를 통과했습니다
데이터가 URL에 직접 노출되므로 보안 문제가 있습니다
브라우저가 onhashchange
이벤트를 지원하지 않는 경우 회전 학습을 통해 URL 변경을 학습해야 합니다
일부 해시가 변경되면 브라우저는 기록 레코드를 생성하므로 사용자 경험에 영향을 미칠 수 있습니다.
window.name
이 속성은 창 이름을 가져오거나 설정하는 데 사용됩니다. 그 특징은 창의 수명 주기 동안 창에 의해 로드된 모든 페이지가 이 값을 공유하고 이 속성에 대한 읽기 및 쓰기 권한을 갖는다는 것입니다. 즉, 값이 수정되지 않으면 다른 페이지 로드 간에 변경되지 않으며 최대 2MB의 저장 공간을 지원합니다.
이 기능을 사용하면 다음 단계에 따라 도메인 간 요청을 해결할 수 있습니다.
a.github.io/a.html에서 b.github.io/b.html을 가리키는 iframe을 만듭니다(페이지에 자체 창이 연결됨). .name to iframe)
a.github.io/a.html에 iframe 모니터링 onload 이벤트를 추가하고, 이 이벤트에서 iframe의 src를 로컬 도메인의 프록시 파일로 설정합니다(프록시 파일과 a.html은 동일한 도메인 내에서 서로 상호 작용할 수 있음) 동시에 iframe의 이름 값을 전송할 수 있습니다. 데이터를 얻은 후 iframe을 파괴하고 메모리를 해제하며 보안도 보장할 수 있다는 장점이 있습니다. window.name은 브라우저의 도메인 간 액세스 제한을 교묘하게 우회하지만 동시에 또 다른 안전한 작업입니다.
window.postMessage
API의 자세한 사용법은 MDN을 참고하세요.
JSONP
JSONP(전체 이름은 JSON with Padding)는 AJAX를 사용하여 구현된 다양한 소스에 대한 도메인 간 요청입니다. 기본 원칙: 웹 페이지는 <script><br/> 요소를 추가하여 서버에서 JSON 데이터를 요청합니다. 이 접근 방식은 서버가 요청을 받은 후 동일 출처 정책에 의해 제한되지 않으며 데이터를 콜백 함수에 넣습니다. 지정된 이름으로 다시 보냅니다. <br/>다음은 test.js에서 반환한 내용이 바로 코드로 실행되기 때문에 a.html에 콜백<br/> 함수가 정의되어 있으면 바로 호출됩니다. <br/>//현재 페이지 a.com/a.html<script type="text/javascript">//콜백 함수 function callback(data) { Alert(data.message);}</script><스크립트 유형 ="text/javascript" src="http://b.com/test.js">// test.js// 콜백 함수를 호출하고 json 데이터 형식으로 전달합니다. 콜백을 완료하기 위한 설명({message:"success"});
스크립트의 유연성을 보장하기 위해 JavaScript를 통해 스크립트 태그를 동적으로 생성하고 HTTP 매개변수를 통해 콜백 함수 이름을 서버에 전달할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
