什么是 CORS
CORS（Cross-Origin Resource Sharing）指的是跨域资源共享，是由浏览器的同源策略所限制的，但是浏览器使用 CORS 可以绕过同源策略，实现跨域访问。当前 Web 应用中，CORS 已经是一个比较常见的应用场景。
CORS 跨域问题的解决
使用 Express.js 时，出现 CORS 跨域问题的原因主要是因为 Express.js 默认不允许跨域访问资源。我们可以通过设置响应头部 Action 来解决这个问题。在 Express.js 中，可以使用 CORS 中间件进行跨域请求。
安装
使用 NPM 安装 CORS：
npm install cors
使用
在 Express.js 应用中添加 CORS 中间件，即可实现跨域请求。示例代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- -- ----------- ----- ------ - ------ ------- -------------------- --- ---------------- -- -- ---- -- ---------------- -- -- - ------------------- ------- -- ----------------------- --
在上面的示例代码中，我们使用 cors 函数构建 myCors 中间件，然后在 app 中使用 myCors 中间件。默认情况下，会允许所有的跨域请求，所以需要传递参数来设置允许跨域访问的域名。
常用参数
- origin：可以是一个字符串，也可以是一个返回字符串的函数。表示允许跨域访问的源地址。默认情况下为 *，表示允许所有源跨域访问。
- methods：表示允许跨域访问的 HTTP 请求方法。
- allowedHeaders：表示允许跨域请求的头信息。
- exposedHeaders：表示允许客户端访问的响应头信息。
- credentials：表示是否允许客户端发送带凭证的请求（如 Cookies）。默认为 false。
- maxAge：表示在发送 preflight 请求缓存结果的时间。
Pre-flight
有些浏览器会在发送跨域请求之前发送一个 preflight 请求，以确保请求是安全的。在 Express.js 应用中，可以设置响应相关的 HTTP 头部，以便浏览器正常发送 preflight 请求。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- -- ----------- ----- ------ - ------ ------- --------------------- -------- --------------------------------- --------------- ---------------------------------------------- ------------ ----- ------- ------- --- ---------------- -- -- ---- -- ---------------- -- -- - ------------------- ------- -- ----------------------- --
总结
CORS 跨域问题在 Web 应用中使用越来越频繁，本文介绍了使用 Express.js 中间件解决跨域请求的问题。在使用中，需要注意一些参数的设置，以及 preflight 请求的处理。通过调整参数可以更好地控制允许跨域请求的来源。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de2257f6b2d6eab3969da4