前端常见跨域解决方案

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

常见跨域场景

URL 说明 是否允许通信

http://www.domain.com/a.js

http://www.domain.com/b.js 同一域名，不同文件或路径 允许

http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js

http://www.domain.com/b.js 同一域名，不同端口 不允许

http://www.domain.com/a.js

https://www.domain.com/b.js 同一域名，不同协议 不允许

http://www.domain.com/a.js

http://192.168.4.12/b.js 域名和域名对应相同ip 不允许

http://www.domain.com/a.js

http://x.domain.com/b.js 主域相同，子域不同 不允许

http://domain.com/c.js

http://www.domain1.com/a.js

http://www.domain2.com/b.js 不同域名 不允许

跨域解决方案

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享（CORS）

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

一、 通过jsonp跨域

==========================================================================

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1.）原生实现：

服务端返回如下（返回时即执行全局函数）：

handleCallback({“status”: true, “user”: “admin”})

2.）jquery ajax：

$.ajax({

url: ‘http://www.domain2.com:8080/login’,

type: ‘get’,

dataType: ‘jsonp’, // 请求方式为jsonp

jsonpCallback: “handleCallback”, // 自定义回调函数名

data: {}

});

3.）vue.js：

this.$http.jsonp(‘http://www.domain2.com:8080/login’, {

params: {},

jsonp: ‘handleCallback’

}).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一种请求。

二、 document.domain + iframe跨域

=============&