cros 同源策略

问题出现：

Access to XMLHttpRequest at 'http://localhost:3000/admin/users/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authentication-token is not allowed by Access-Control-Allow-Headers in preflight response.

vue+vuex+node（express）使用登录时，需要在请求头中添加登录接口中获取到的token

同源策略：

MDN:MDN-CORS

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

跨域请求存在的原因：由于浏览器的同源策略（same-origin policy），即属于不同域的页面之间不能相互访问各自的页面内容。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循 同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

  （译者注：这段描述不准确，并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。）

所谓同源指三个相同：协议相同，域名相同，端口相同。

如果非同源有三种行为将会受到限制：

（1）Cookie、LocalStorage 和 IndexDB 无法读取。（2）DOM无法获得。(3)ajax请求不能发送。

跨域的场景：    

1.域名不同 www.yangwei.com 和www.boqi.com 即为不同的域名）

2.二级域名相同，子域名不同（www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不同）

3.端口不同，协议不同  （ http://www.yangwei.com 和https://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)

比如，站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

 

跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。