浏览器的同源策略以及跨域的解决方案

浏览器的同源策略

---

一、浏览器的同源策略是什么？

同源

同源是指浏览器与服务器的协议,域名,端口相同就是同源

浏览器采用同源策略的目的 : 是为了保证用户信息的安全，防止恶意的网站窃取数据

二. 同源策略的分类

• DOM 同源策略： 禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的(比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码)
• XMLHttpRequest 同源策略： 禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求(这一点里面其实包括了 ajax)。
• Cookie、LocalStorage、IndexedDB 等存储性内容同源策略： js中无法访问不属于同个源的cookie、LocalStorage中存储的内容。

三. 为什么要使用同源策略

• 同源策略可以防止网页获取数据
• 为了防止恶意网站iframe其他网站的时候，获取数据
• 为了防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。

四 . 解决跨域的方案

1.使用CORS

CORS（跨域资源共享）使用专用的HTTP头，服务器（api.baidu.com）告诉浏览器，特定URL（baidu.com）的ajax请求可以直接使用，不会激活同源策略。

2.使用jsonp

因为js调用（实际上是所有拥有src属性的 <\script>、<\img>、<\iframe>）是不会经过同源策略，例如baidu.com引用了CDN的jquery。所以我通过调用js脚本的方式，从服务器上获取JSON数据绕过同源策略。
只有xhr的请求方式才有可能产生跨域问题，所以不会产生跨域问题

3.反向代理

当你访问baidu.com/api/login的时候，通过在baidu.com的nginx服务器会识别你是api下的资源，会自动代理到api.baidu.com/login，浏览器本身是不知道我实际上是访问的api.baidu.com的数据，和前端资源同源，所以也就不会触发浏览器的同源策略