跨域资源共享（CORS）是怎么回事？+ Node Express 代码实现

先来看看MDN文档中关于CORS的介绍

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

参考链接 ——CORS | MDN

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

参考链接——跨源资源共享（CORS）| MDN

用自己的话总结CORS

1.浏览器是个公共应用，而Web App是私人应用，出于安全考虑，为了避免非法的操作（如跨站脚本攻击，指的是攻击者往Web页面里插入恶意html代码，当用户浏览页面时，嵌入其中的html代码会被执行，从而达到恶意获取用户信息的特殊目的。），浏览器有同源策略，即只允许获取同源的资源，同源指协议、域名、端口均相同。

2.但在开发的过程中，有时候的确需要访问不同源的资源，比如前端应用需要请求数据访问后端接口。为了解决浏览器同源策略限制太过的问题，于是需要CORS（跨域资源共享）策略，服务器端提前在HTTP请求头部指明哪些源、哪些请求方法（get/post/patch等）的前端可以正常请求，让浏览器放行。

3.需要注意的是同源策略并不会阻止请求的发出，请求会正常发出，服务器接收之后响应，此时浏览器拿到响应，会根据HTTP请求头的内容判断本次请求是否在允许的范围内，如果在会返回给前端，前端即拿到需要的数据；如果不在，浏览器将包截住，控制台打印请求报错信息，看起来就好像在请求发出的时候就被拦截了，事实上并非如此。

下图是请求被成功接收并处理，response的头部信息：

红色方框内的内容就是实现跨域资源共享的关键，服务器端需要提前指定这四项内容：

Access-Control-Allow-Credentials
//表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
Access-Control-Allow-Headers
//允许请求的头部
Access-Control-Allow-Methods
//允许请求的方法
Access-Control-Allow-Origin
//允许请求的源

不在允许范围之内的请求就会被浏览器拦截下来。

代码实现（Node Express框架）

在文件 app.js 中添加如下内容，设置实现CORS

// 设置实现 CORS 
app.use((req, res, next) => {
  // 设置允许跨源访问的 URL
  const allowOrigin = [
    "http://localhost:3000",
  ];
  let { origin } = req.headers;
  if(allowOrigin.includes(origin)) {
    res.setHeader("Access-Control-Allow-Credentials", true);
    res.setHeader("Access-Control-Allow-Origin", origin);
    res.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, HEAD, DELETE, OPTIONS");
  }
  next();
});