同源、跨域&如何解决

1. 同源策略 跨域 如何解决？

同源策略

同源策略在web应用的安全模型中是一个重要概念。在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。

不同源的网站，不能访问Cookie、localStorage、indexDB、不能获取DOM、不能发送Ajax请求。（实际上是不允许读取response，还是能发送请求的）

同源策略是浏览器的行为，为了保护本地数据不被请求回来的数据污染，拦截的是客户端发出的请求请求回来的数据，服务器响应了数据，但是被同源策略拦截。

怎样算是同源呢？

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

谁和谁需要同源呢？

1. 当前页面的url和iframe嵌套的页面url
2. 当前页面的url和向服务器发送的url,主要是针对XMLHttpRquest发送的请求

跨域

跨域，指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。

跨域的严格一点来说就是只要协议，域名，端口有任何一个的不同，就被当作是跨域。（协议和端口造成的跨域问题，似乎前端是无法解决的）

如何解决跨域问题

1. JSONP

JSONP（JSON with padding）跨域的先决条件有下面几条:

   (1)<script>、<link>、<img>这些标签也可以请求外部资源,并且请求不受同源策略限制,比如script的src属性值是一个http路径时就会发出相关的请求

   (2)系统会把<script>内部的内容按照js代码来解析执行

   (3)服务器配合

通过<script>的src请求的内容会被浏览器以JS代码来执行，这为实现跨域提供了可能性。

1. 我们可以在客户端提前设置好一个函数（这个函数专门处理跨域获取服务器JSON格式的数据），其函数名当作参数值传递给服务器，函数的形参为要获取的目标数据（服务器返回的data）。
2. 创建一个<script><