对前端来说跨域应该是不陌生的，解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式，所以难免在联调阶段会遇见一些CORS跨域的问题，下面通过一个简单的demo验证一下CORS解决跨域的过程中，对一些不清楚的知识点做一个简单的总结

示例 demo 已经放在GitHub 上, 其中目录client文件夹托管客户端代码、server目录作为处理CORS的服务端，分别把两端的代码跑起来，就可以进行CORS相关配置的学习了

对CORS的了解可以先看下一下阮老师的这两篇文章:

1、浏览器同源政策及其规避方法

2、跨域资源共享CORS详解

假设你已经了解服务端处理CORS跨域时，会配置相关的一些响应头，如下：

Access-Control-Allow-Credentials: true,
Access-Control-Allow-Origin: *,
Access-Control-Allow-Headers: 'header',
Access-Control-Expose-Headers: 'serve-header',
Access-Control-Allow-Methods: 'methods',
Access-Control-Max-Age: '1800', // 30min = 1800s

那这些响应头都具体是神马作用呢？ 下面会结合demo来了解各参数的配置作用，并给出结果图。

第一个参数：Access-Control-Allow-Origin

作用：服务端允许跨域的源，也就是浏览器的输入的地址。demo中为：http://huoyun-test.djtest.cn 包括端口号80，80端口默认省略了。

如果把server端的origin改为: http://huoyun-online.djtest.cn, 当发送请求的时候，浏览器包如下错误：

如上图由请求头和响应头以及控制台(1、2、3)三点得出：由于CORS策略，通过浏览器预检请求options得出源Origin对应的url不在CORS跨域允许的范围类，因此呢，服务端应该设置对应的页面域名http://huoyun-test.djtest.cn，这样才不会报这样的错误。

第二个参数：Access-Control-Allow-Credentials

作用：携带cookie

如果调用接口过程中，需要cookie的传递，则需要设置这个参数为true，并且Access-Control-Allow-Origin就不能设为星号*，必须指定明确的、与请求网页一致的域名。 如果前端采用axios来请求接口时，需同时设置axios.defaults.withCredentials = true;

这里如果设置 Access-Control-Allow-Origin: * ，会报如下的错误:

也就是上面说的Access-Control-Allow-Origin此时不能设置为星号*，如果不需要携带cookie时即不设置Access-Control-Allow-Credentials响应头，但此时前端设置了axios.defaults.withCredentials=true;，浏览器也会包类似的错误：

即当浏览器通过XMLHttpRequest对象发送请求时，设置了withCredentials属性为true时，对应的服务端此时需要做相应的处理。

因此当前后端在CORS跨域出现问题时，通过修改demo来验证就可以很好的找到答案了，而不是百度了一遍，依然是处于茫然中，不知道要让服务端干嘛，同时作为前端应该怎么做，不让自己此时成为前端小白，有话可说...

第三个参数：Access-Control-Allow-Headers

作用：前后端需要通过header来进行数据交互时，需要设置使用到的header字段。

如前端通过设置请求头header中的字段axios.defaults.headers.common['client-header'] = 1;, 如果此时Access-Control-Allow-Headers字段没有设置对应的header字段，浏览器会报如下错误：

也就是说通过前端设置的自定义header字段，需要服务端在Access-Control-Allow-Headers字段中设置对应的header