浅谈跨域问题

1前言： 这几天在公司做一个大数据量的导出功能，但是一直在服务器内存和各种后端性能极优的情况下总是不能达到预期效果，所以很脑壳疼，在探究问题的原因时，发现前端报错了，在百度搜索知道是VUE响应超时时，我看一下前端设置的超时时间是10S，几十万的数据导出你让我10S做出响应，我也是醉了，不知道为什么研究着，研究着这个问题，突然研究起来跨域问题来了，看到有个博客写的不错，根据这个博客内容，再结合自己的思考，做一下记录。

2.1什么是跨域：是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。
2.2什么情况下算是跨域：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

2.3跨域问题会带来什么安全问题： 答案是有可能被不法分子利用来发动 CSRF攻击。
2.3.1什么是CSRF攻击：中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。
2.3.2CSRF攻击的过程

​ CSRF 攻击的原理大致描述如下：有两个网站，其中A网站是真实受信任的网站，而B网站是危险网站。在用户登陆了受信任的A网站是，本地会存储A网站相关的Cookie，并且浏览器也维护这一个Session会话。这时，如果用户在没有登出A网站的情况下访问危险网站B，那么危险网站B就可以模拟发出一个对A网站的请求（跨域请求）对A网站进行操作，而在A网站的角度来看是并不知道请求是由B网站发出来的（Session和Cookie均为A网站的），这时便成功发动一次CSRF 攻击。
2.4既然跨域会引起安全问题，浏览器是怎么样限制跨域，来维护我们的安全的呢？——答案是同源策略。
2.4.1什么是同源：域名、协议、端口有一个不同就不是同源，三者均相同，这两个网站才是同源
2.4.2同源策略的含义：

• DOM 层面的同源策略： 限制了来自不同源的”Document”对象或 JS 脚本，对当前“document”对象的读取或设置某些属性

• Cookie和XMLHttprequest层面的同源策略：禁止 Ajax 直接发起跨域HTTP请求（其实可以发送请求，结果被浏览器拦截，不展示），同时 Ajax 请求不能携带与本网站不同源的 Cookie。

• 同源策略的非绝对性：<script><img><iframe><link><video><audio>等带有src属性的标签可以从不同的域加载和执行资源。

• 其他插件的同源策略：flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略，只是这些同源策略不属于浏览器原生的同源策略，如果有漏洞则可能被黑客利用，从而留下XSS攻击的后患.

2.5虽然跨域会出现安全问题，只要我们安全防范还是可以避免的，浏览器默认是不支持跨域的，我们怎么样解决跨域问题呢？
2.5.1综述解决办法：经常使用的 JSONP, CORS 方法。
2.5.2方案一：JSONP
2.5.2.1原理：

• JSONP 是一种非官方的跨域数据交互协议
• JSONP 本质上是利用 <script><img><iframe> 等标签不受同源策略限制，可以从不同域加载并执行资源的特性，来实现数据跨域传输。
• JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
• JSONP 的理念就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript 代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。

2.5.2.2示例：
前端代码：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(data){
        //处理获得的数据
    }
</script>

后端代码：

2.5.2.3优缺点：

• 优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行。

• 缺点：它只支持 GET 请求，而不支持 POST 请求等其他类型的 HTTP 请求

2.5.3方案二：CORS
简介： 跨源资源共享 Cross-Origin Resource Sharing(CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。

​ 另外，规范也要求对于非简单请求，浏览器必须首先使用 OPTION 方法发起一个预检请求(preflight request)，从而获知服务端是否允许该跨域请求，在服务器确定允许后，才发起实际的HTTP请求。

• 具体用法参见这位大神的解析