最近在项目中，与后台对接的时候，出现了一些问题
网页上出现了这样的报错：
查看了我发出去的报文，发现报文被浏览器拦截了，并没有发出。
查询了一下，发现这是浏览器同源策略引起的跨域问题，在此记录一下解决方案。
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入：
<link>、<script>、<img>、<frame>等dom标签，还有样式background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
什么要有同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
在我的项目中一开始的问题是AJAX 请求不能发送
跨域的方法其实有很多种，此次我采用的是CORS方法。
CORS
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
CORS详细介绍及机制 访问：http://www.ruanyifeng.com/blog/2016/04/cors.html
此次我需要的是AJAX的GET和POST方法的解决方案，这属于简单请求
对于简单请求
服务端：设置以下参数
Access-Control-Allow-Origin：*
//*代表允许所有的域名访问，写www.abc.com的话就是只允许来自该域名的跨域请求
Access-Control-Allow-Credentials: true
//CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。
客户端：
//需要在AJAX请求中打开withCredentials属性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
在我的AJAX中
现在检查我们发出去的http报文，可以发现发出去的报文带上了Cookie和一个Origin的项，服务器收到报文，检查Origin是否在它的Access-Control-Allow-Origin里面，是的话才提供服务。
