由于同源策略的限制，满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全，但另一方面也限制了资源的使用。
那么如何实现跨域呢，以下是实现跨域的一些方法。
一、jsonp跨域
原理：script标签引入js文件不受跨域影响。不仅如此，带src属性的标签都不受同源策略的影响。
正是基于这个特性，我们通过script标签的src属性加载资源，数据放在src属性指向的服务器上，使用json格式。
由于我们无法判断script的src的加载状态，并不知道数据有没有获取完成，所以事先会定义好处理函数。服务端会在数据开头加上这个函数名，等全部加载完毕，便会调用我们事先定义好的函数，这时函数的实参传入的就是后端返回的数据了。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/jsonp
演示网址：https://mfaying.github.io/lesson/cross-origin/jsonp/index.html
index.html
jsonp.js
callback({"test": 0});
访问index.html弹窗便会显示0
该方案的缺点是：只能实现get一种请求。
二、document.domain + iframe跨域
此方案仅限主域相同，子域不同的应用场景。
比如百度的主网页是www.baidu.com，zhidao.baidu.com、news.baidu.com等网站是www.baidu.com这个主域下的子域。
实现原理：两个页面都通过js设置document.domain为基础主域，就实现了同域，就可以互相操作资源了。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/document-domain
演示网址：https://mfaying.github.io/lesson/cross-origin/document-domain/index.html
index.html
child.html
三、location.hash + iframe跨域
父页面改变iframe的src属性，location.hash的值改变，不会刷新页面(还是同一个页面)，在子页面可以通过window.localtion.hash获取值。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/location-hash
演示网址：https://mfaying.github.io/lesson/cross-origin/location-hash/index.html
index.html
child.html
点击index.html页面弹窗便会显示0
四、window.name + iframe跨域
原理：window.name属性在不同的页面（甚至不同域名）加载后依旧存在，name可赋较长的值（2MB）。
在iframe非同源的页面下设置了window的name属性，再将iframe指向同源的页面，此时window的name属性值不变，从而实现了跨域获取数据。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/window-name
演示网址：https://mfaying.github.io/lesson/cross-origin/window-name/parent/index.html
./parent/index.html
./parent/proxy.html
空文件，仅做代理页面
./child.html
五、postMessage跨域
postMessage是HTML5提出的，可以实现跨文档消息传输。
用法
getMessageHTML.postMessage(data, origin);
data： html5规范支持的任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
getMessageHTML是我们对于要接受信息页面的引用，可以是iframe的contentWindow属性、window.open的返回值、通过name或下标从window.frames取到的值。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/postMessage
演示网址：https://mfaying.github.io/lesson/cross-origin/postMessage/index.html
index.html
child.html
点击index.html页面上的按钮，弹窗便会显示0。
六、跨域资源共享（CORS）
只要在服务端设置Access-Control-Allow-Origin就可以实现跨域请求，若是COOKIE请求，前后端都需要设置。
由于同源策略的限制，所读取的COOKIE为跨域请求接口所在域的COOKIE，并非当前页的COOKIE。
CORS是目前主流的跨域解决方案。
原生node.js实现
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/cors
演示网址：https://mfaying.github.io/lesson/cross-origin/cors/index.html(访问前需要先执行node server.js命令启动本地服务器)
index.html
server.js
var http = require(&＃39;http&＃39;);
var server = http.createServer();
server.on(&＃39;request&＃39;, function(req, res) {
res.writeHead(200, {
&＃39;Access-Control-Allow-Credentials&＃39;: &＃39;true&＃39;, // 后端允许发送COOKIE
&＃39;Access-Control-Allow-Origin&＃39;: &＃39;https://mfaying.github.io&＃39;, // 允许访问的域（协议+域名+端口）
&＃39;Set-COOKIE&＃39;: &＃39;key=1;Path=/;Domain=mfaying.github.io;HttpOnly&＃39; // HttpOnly:脚本无法读取COOKIE
});
res.write(JSON.stringify(req.method));
res.end();
});
server.listen(&＃39;8080&＃39;);
console.log(&＃39;Server is running at port 8080...&＃39;);
koa结合koa2-cors中间件实现
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/koa-cors
演示网址：https://mfaying.github.io/lesson/cross-origin/koa-cors/index.html (访问前需要先执行node server.js命令启动本地服务器)
index.html
server.js
var koa = require(&＃39;koa&＃39;);
var router = require(&＃39;koa-router&＃39;)();
const cors = require(&＃39;koa2-cors&＃39;);
var app = new koa();
app.use(cors({
origin: function (ctx) {
if (ctx.url === &＃39;/test&＃39;) {
return false;
}
return &＃39;*&＃39;;
},
exposeHeaders: [&＃39;WWW-Authenticate&＃39;, &＃39;Server-Authorization&＃39;],
maxAge: 5,
credentials: true,
allowMethods: [&＃39;GET&＃39;, &＃39;POST&＃39;, &＃39;DELETE&＃39;],
allowHeaders: [&＃39;Content-Type&＃39;, &＃39;Authorization&＃39;, &＃39;Accept&＃39;],
}))
router.get(&＃39;/&＃39;, async function (ctx) {
ctx.body = "0";
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
console.log(&＃39;server is listening in port 3000&＃39;);
七、WebSocket协议跨域
WebSocket协议是HTML5的新协议。能够实现浏览器与服务器全双工通信，同时允许跨域，是服务端推送技术的一种很好的实现。
示例代码：https://github.com/mfaying/lesson/tree/master/cross-origin/websocket
演示网址：https://mfaying.github.io/lesson/cross-origin/websocket/index.html(访问前需要先安装依赖包，再执行node server.js命令启动本地websocket服务端)
前端代码：
server.js
var WebSocketServer = require(&＃39;websocket&＃39;).server;
var http = require(&＃39;http&＃39;);
var server = http.createServer(function(request, response) {
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log(&＃39;Server is listening on port 8080&＃39;);
});
wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false
});
function originIsAllowed(origin) {
return true;
}
wsServer.on(&＃39;request&＃39;, function(request) {
if (!originIsAllowed(request.origin)) {
request.reject();
console.log(&＃39;Connection from origin &＃39; + request.origin + &＃39; rejected.&＃39;);
return;
}
var cOnnection= request.accept(&＃39;echo-protocol&＃39;, request.origin);
console.log(&＃39;Connection accepted.&＃39;);
connection.on(&＃39;message&＃39;, function(message) {
if (message.type === &＃39;utf8&＃39;) {
const reqData = JSON.parse(message.utf8Data);
reqData.test -= 1;
connection.sendUTF(JSON.stringify(reqData));
}
});
connection.on(&＃39;close&＃39;, function() {
console.log(&＃39;close&＃39;);
});
});
八、nginx代理跨域
原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不存在跨越问题。
实现：通过nginx配置代理服务器（域名与test1相同，端口不同）做跳板机，反向代理访问test2接口，且可以修改COOKIE中test信息，方便当前域COOKIE写入，实现跨域登录。
nginx具体配置：
#proxy服务器
server {
listen 81;
server_name www.test1.com;
location / {
proxy_pass http://www.test2.com:8080; #反向代理
proxy_COOKIE_test www.test2.com www.test1.com; #修改COOKIE里域名
index index.html index.htm;
add_header Access-Control-Allow-Origin http://www.test1.com; #当前端只跨域不带COOKIE时，可为*
add_header Access-Control-Allow-Credentials true;
}
}
非常全的跨域实现方案
京公网安备 11010802041100号