浏览器的同源策略
同源策略（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 | 允许的请求头部 |
