同源策略

同源策略

一般浏览器端的同源指的是：协议 域名 端口号 都完全相同

同源策略区分为

DOM同源策略

考虑一个场景，在页面A中iframe嵌入了页面B，然后将A的网址发给某个用户。用户进入后误以为是网站B，并填写了用户名和密码。若页面A就可以访问到B的dom元素，则可进一步得知用户输入的值，这样密码就被泄露了。
由于同源策略的存在，禁止不同域页面相互访问DOM，因此A获取不到B的DOM元素。

XHR同源策略

假设：用户访问网站A，成功登录后本地保存了cookie。之后恶意网站B也向A的服务器发起请求，并携带cookie，服务器校验cookie后返回数据，泄露数据。

XHR同源策略：禁止用XHR向不同源服务器地址发起http请求

一般来说我们考虑较多的是XHR同源策略，当向服务器发起跨域请求时，如何处理可以得到响应呢?

1. CORS
   跨域资源共享策略：W3C标准，定义跨域请求时浏览器和服务器如何沟通，获取资源。对web开发者来说，无需修改代码，行为由浏览器自己做到。
   首先区分跨域请其是否为简单请求
   若为简单请求，则在请求头部中加一个Origin字段，其中包含了发起请求网站源信息，由服务器做校验判断是否合法
   若为非简单请求，则在发起真正请求之前，先发起一次预检请求，使用option方法，并在请求头中携带一些内容。若浏览器认为请求合法，则会成功响应。之后浏览器会自动发起第二次请求，获取到数据。

2. 代理
   在网络中架设一台代理服务器，浏览器向代理服务器发请求时不跨域，代理服务器将请求转发到指定地址，然后等待响应。
   由于同源策略只是浏览器的概念，对服务器来说不存在跨域问题，故也可解决跨域问题。

3. JSONP
   利用script标签，将script的src指向某个服务器地址，由于script标签无同源策略限制，所以可以加载其他域资源。（只能处理GET请求）
   在向其他域发请求之前，在web设计一个回调函数，然然后将其携带在请求URL中发送至服务器，服务器处理请求后，直接触发该函数执行回调，请求结果作为函数实参传入即可。

4. img.src
   img标签引入资源时，也没有跨域限制，因此可以用来做跨域请求。（我没有用过此种方式，因为H5的CORS已满足使用）
   实例：我们在百度上随便找张图，然后复制图片地址，自己本地写一个img标签，发现都能正常引入数据。