浏览器同源策略和跨域请求

浏览器同源策略

同源：若是两个页面拥有相同的协议(如http,https等)，端口(80,443)和域名(www.happyjava.cn)，那么这两个页面就属于同一个源。

同源策略：浏览器的一套安全机制，这些安全机制都以同源为限制条件。同源策略，隔离了不一样源网站的cookie，拦截不一样源的请求，只容许同源网站的脚本运行，保证了web网站的安全。

若是没有同源策略，当你打开银行网站，同时又打开了另一个恶意网站。这时，恶意网站就有能力修改你这个网站的dom，使你后续发送的请求都发送到恶意网站的服务器上，而后恶意网站就能获取到你的cookie等信息，将会对我的的隐私财产构成巨大的威胁。

同源策略的缺点和权衡

若是严格的遵循同源策略，也会面临不少的问题。好比，图片，css，js等都得从同域名网站下去获取，我的网站，小网站这样是没问题的。可是对于用户量很大的网站，显然对服务器的压力将会很大，图片等大文件都会占用服务器的带宽。

不要安全不行，不要性能也不行。在安全和性能上的考虑，使得现代浏览器在安全性和可用性之间选择了一个平衡。因此，如今的浏览器，对于一些资源标签，都开了后门权限。好比，img script style等标签，都容许垮域引用资源，严格说这都是不符合同源要求的。

跨域请求

了解了浏览器的同源策略以后，能够接着谈谈跨域请求的问题了。由于同源策略的存在，因此跨域的AJAX都是会被浏览器拦截下来的。咱们先来看一个例子:

这是一个andt-pro的页面，有个请求当前用户的方法，而后把用户信息显示在右上角。因为是先后端分离开发的，因此前端页面在http://localhost:8000上，后端接口在http://localhost:8080上，这就是不一样源了。请求的结果以下：

我在后端的接口里也作了请求输出：

@GetMapping(value = "/currentUser")
public Object currentUser() {
 System.out.println("请求过来了");
 Map map = new HashMap();
 map.put("name", "Happy");
 map.put("avatar", "http://locahost:8080/head.jpg");
 return map;
}

经过上面两个结果，能够明显看出，请求是成功了的。可是，结果却被浏览器给拦截了: xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。

解决跨域问题

以前我写了【快学springboot】6.WebMvcConfigurer配置静态资源和解决跨域，在这篇文章里，我介绍了如何经过springboot的配置解决跨域问题。其实解决跨域问题有不少种方式，这里暂时不作其余探讨了。有时间会再写一篇文章来总结。

解决了跨域问题以后，刷新以前的页面：

请求成功，昵称和头像都出来了。

安全防范

如今的浏览器，在安全和性能上作了权衡，并非严格遵循同源策略的。因此，在开发web的时候，要注意防范XSS攻击等。别被利用XSS漏洞，经过输入框，给你注入了恶意的js代码等。