20191128 Java Web知识之浏览器的同源策略机制及跨域资源共享机制

1、前言

同源策略、跨域资源共享，都是Java Web中很常见的知识，工作中也经常能遇到，因此很有必要了解一番。

为什么要了解这些知识？首先是因为工作中会遇到。对接前端时，前端说我接口没有响应，但是我用postman测试却是有返回数据的，这么怪异的问题。而问题的解决，只需要运维同事一分钟不到的操作。这是什么原因，难道我能不好奇吗？

我一直觉得学到才是自己的，以及真正掌握知识是需要知其然并知其所以然的。因此我愿意工作之余花时间来学习。好啦，闲话不多说。

本文主要是对同源策略和CORS做了摘要记录和分析，文章参考的是阮一峰老师的两篇文章，看完之后，收获很大。文中也有一些自己的思考和理解。

自己在学习过程中，也经常被各种概念的知识点扰乱，最后通过理清思路和抓住主干问题去学的方式慢慢领悟。因此跳过了一些于我而言不是那么重要的知识如localStorage、indexDB、DOM跨域访问的介绍及处理。
也许顺着下面的问题去学习，会更加的把各个知识点串起来和更快的掌握这些知识。

1、搞明白什么是同源策略，什么是同源？
2、执行同源策略的对象是谁？是浏览器。
3、为什么浏览器要有同源策略机制？
4、浏览器的同样策略的内容是什么，或者说哪些操作会受到同源策略机制的限制
5、同源策略给我们带来的困扰
6、CORS机制的介绍
7、执行CORS机制的对象是谁？也是浏览器
8、为什么要有CORS机制？为的是让我们可以在安全的环境中也能执行跨域请求、以及共享跨域资源
9、要实现跨域请求以及共享跨域资源，前端需要怎么做？后端需要怎么做？

2、同源策略

2.1、简介

同源策略，即same-origin policy，最初由NetScape公司添加到浏览器，当前所有的浏览器都支持此功能。
初始的功能是为了限制非同源网页之间cookie的访问，例如www.taobao.com/a.html页面无法访问非同域的www.jingdong.com/b.html页面的cookie。

实施同源策略的对象是谁？？是浏览器！！！因此我们说同源策略时，其实是省略了主语的，实际上是——浏览器实施的同源策略。记住记住记住，同源策略的执行者是浏览器！！！

2.2、何为同源？

那么什么叫做同源？同源指协议、域名、端口都相同。

2.3、为什么浏览器要有同源策略机制

cookie通常用来存储登录状态，如果对cookie访问不做限制，那么会有很大的安全隐患问题。比如我登录了知乎网站浏览信息。然后点了一个连接结果打开的是一个恶意网站，它拿到了我浏览器下的所有cookie，这样他就可以访问知乎网页并传入这些cookie，这样他就无需输入我的账密就登录了我的账号了。如果他拿了我的账号去散播谣言，说些反动的言论。那么就危险了。如果登录的是有金钱交易的网站，那么钱或许都会被转走了。

因此，同源策略的目的，是为了保护用户信息，防止恶意的网站窃取数据。

2.4、同源策略做了哪些限制

随着浏览器功能的增强，同源策略由最初限定cookie的访问，发展到限制多种本地信息：
1、cookie、localStorage、indexDB访问限制；
2、DOM获取限制
3、AJAX请求被拒绝

2.5、浏览器中不受同源策略限制的操作

而有些操作是不受同源策略限制的：
1、页面中的超链接，可以点击访问其他不同源的页面
2、表单提交，不同源的页面可以相互提交表单数据
3、嵌入到页面的资源，比如引入js文件，图片或者css文件等

2.6、同源策略虽然是为了保护用户数据安全，但是也会带来一定的困扰

虽然同源策略的限制很有必然，但是有时也很不方便，一些合理的用户也收到影响，例如呢？

例如：
1、前端和后端使用不同技术开发，部署后访问的端口不一致，这样前端页面中访问后端接口就会有跨域问题
2、前端程序和后端程序部署在不同服务器上，那么域名不同，也会存在跨域问题

2.7、绕开同源策略限制——浏览器的CORS机制

因此，我们还需要了解一些可以实现绕开同源限制的方法，即跨域也可以传cookie、跨域也可以发起ajax请求等等。跨域ajax请求实在是太常见了。

跨域问题是由于浏览器的同源策略机制，而要解决跨域问题，可以通过跨域资源共享机制，来绕开同源策略。

可是同源政策规定，AJAX请求只能发给同源的网址，否则就报错。那么AJAX如何绕开同源策略？使用CORS——Cross-origin resource Sharing，即跨域资源共享。它是W3C标准，是跨源AJAX请求的根本解决方法。

在CORS出现之前，是没有办法请求不同源的API接口的，这是出于安全考虑，即跨域请求会被同源策略机制拦下。而在CORS机制出现之后，ajax跨域请求在一定条件下也能发生。

CORS是一种跨域资源请求机制，它已经成为了标准。所有的浏览器都默认都支持。只是AJAX要实现跨域请求不仅需要浏览器端支持还需要服务器端允许才能生效。

对于CORS机制，当浏览器发现AJAX请求跨域，就会在请求头信息加上一个字段：Origin，该字段表示本次请求来自哪个源（协议、域名、端口）。这个值表明这个请求是从浏览器打开的哪个域名下发出的。出于安全原因，浏览器不允许你修改这个值。
对于跨域请求，如果服务器端没有额外做特殊处理，服务器依然能收到请求并作出响应给浏览器，只是浏览器出于同源策略机制会忽略掉服务器端的响应。
这是浏览器的同源策略的限制，如果要解决，则需要在服务器中的响应报文中的响应头中，添加一个参数——Access-Control-Allow-Origin，并且设置其值为请求头中的Origin同样的值或者“ * ”。这样就能通过CORS机制绕开浏览器的同源策略中拒绝跨域ajax请求的限制了。

要注意的是，对于CORS请求，默认是不会传输cookie的，如果一定要传输cookie，则需要前端和后端双方都同意，cookie才会被传输：后端需要在响应头中设置Access-Control-Allow-Credentials=true，则前端需要在ajax中设置withCredentials = true。并且后端响应头中设置的Access-Control-Allow-Origin不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

3、参考文章

http://www.softwhy.com/article-9109-2.html
以及阮一峰的老师的两篇文章
浏览器同源政策及其规避方法：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
跨域资源共享 CORS 详解：http://www.ruanyifeng.com/blog/2016/04/cors.htmlhttp://www.ruanyifeng.com/blog/2016/04/cors.html