浏览器的同源策略

同源策略（Same Origin Policy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。

浏览器的源指的是，协议://域名:端口这样的URL组合。

示例	结果
http://example.com和https://example.com	协议不同，不同源
http://www.example.cn和http://example.cn	域名不同，不同源
http://www.example.cn和http://www.example.cn:8080	端口不同，不同源
http://www.example.cn和http://www.example.cn/test	同源

可见影响“源”的因素有：协议、域名或IP地址（如果是IP地址则看做一个根域名）、子域名、端口。

在实际开发当中，可能会涉及到不同的跨域访问方式。像现在WEB开发前后端分离的开发方式，就会涉及到这方面的应用。根据不同的应用场景，可将跨域访问方式进行简单分成，跨域脚本API访问、跨域存储数据访问。

跨域访问解决方法

根据不同的服务场景，选择不同的跨域访问方式解决数据的跨域访问。

场景一，项目需要在页面脚本，通过异步请求的方式访问其他域名下的资源。
这种模式下，最常用的，就是通过jsonp，利用JavaScript加载没有同域策略的机制。在这种方式功能有所限制，只支持Get请求。
与这种方式类似，就是利用iframe间通信方式，具体就不展开。
场景二，针对目前常见前后端分离开发方式，前端在登录时，若需要在Cookie中保存sessionId信息，则Cookies需要进行跨域访问。此时，后端服务需要告诉前端请求的浏览器，指定Access-Control-Allow-Credentials字段，允许此次跨域的访问请求，并允许将后端生成的Cookies在前端浏览器保存。同时，浏览器在请求的时候，在Ajax请求头上，也要带上此字段信息。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
这就是常见的跨域资源共享（CORS）。

服务器常用请求头及说明

请求头	解释
Access-Control-Request-Method	先导请求中的请求头，告诉服务器真实请求的http方法
Access-Control-Request-Headers	先导请求中的请求头，告诉服务器真实请求的http请求头相应头
Access-Control-Allow-Origin	该字段必须，表示服务器允许跨域请求的origin，设置为*表示接受任意域名请求
Access-Control-Expose-Headers	该字段可选，CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。如getResponseHeader('FooBar')可以返回FooBar字段的值。
Access-Control-Allow-Credentials	该字段可选，表示是否允许发送cookie。默认不允许，
Access-Control-Allow-Methods	允许的请求方法
Access-Control-Allow-Headers	允许的请求头部