前言
在前端开发中，跨域请求是一个非常常见的需求。而为了解决跨域问题，我们通常需要在服务端进行特殊的处理。这样的处理方式虽然可行，但每个项目都需要进行一遍重复操作，既费时又费力。于是，一些开发者为了简化这个过程，推出了一些大受欢迎的 npm 包，例如 CORS，koa-cors，express-cors 等等。而本篇文章要介绍的就是另一个 npm 包 —— make-corsy。
make-corsy 介绍
make-corsy 是一个用于生成 CORS 相关中间件的 npm 包。它可以帮助开发者轻松地添加 CORS 支持以实现跨域请求。make-corsy 通过提供一个函数工厂来生成 CORS 中间件处理函数，让用户可以根据自己的需要定制 CORS 中间件，支持设定允许请求的来源（Origin）、请求方法（Methods）和头信息（Headers）等等。
安装
使用 make-corsy，需要先在项目中安装该 npm 包。通过 npm 命令即可完成安装：
npm install make-corsy
或者如果你使用 yarn，也可以使用以下命令安装 make-corsy：
yarn add make-corsy
使用方法
引入 make-corsy 后，我们需要调用它提供的函数工厂，获得一个跨域请求处理函数。调用的方法非常简单：
----- -------- - --------------------- ----- ---- - -----------------
其中，options 是一个对象，用于设置 CORS 相关的参数。常用的参数如下：
- origin：允许的跨域请求来源地址。可以设置为一个字符串，表示只允许一个特定的地址跨域请求；可以设置为正则表达式，表示允许符合特定规则的地址跨域请求。
- methods：允许的跨域请求方法。可以设置为一个字符串数组，表示只允许特定的请求方法跨域请求。
- headers：允许的跨域请求头信息。可以设置为一个字符串数组，表示只允许特定的头信息在跨域请求中传输。
这里，我们以一个简单的示例来说明如何使用 make-corsy。
----- ---- - ---------------
----- -------- - ---------------------
----- ---- - ----
----- ---- - ----------
------- ----
-------- ------- --------
-------- ---------------- ----------------
--
----- ------ - ----------------------- ---- -- -
--------- ---- -- -- -
-- ---------
-------------- ------------- -------------
--
--
------------------- -- -- -
---------------------- -- --------------------------
--在上面的代码中，我们首先调用 makeCors 函数工厂生成一个跨域请求处理函数 cors。在创建 server 对象时，我们将该处理函数作为参数传递给了 createServer 方法。在处理每个请求时，我们首先使用 cors 函数对跨域请求进行处理，然后再进行正常的请求处理操作。
路由级别使用
假设我们有一个 RESTful API，需要对各个路由分别进行 CORS 设置。make-corsy 提供了一个方便的方法，可以让我们在路由级别使用 CORS 处理函数。
----- ------- - ------------------ ----- -------- - --------------------- ----- --- - --------- ----- ----------- - ---------- ------- ---- -------- ------- -------- -------- ---------------- ---------------- -- ------------- ---- ----- -- - -- ------- ---- ---- ---------------- ---- ----- -- -- --------- ---- ---- ------------------- ---------- ------- ---------------- --- ----- ---- -- - --------------- ------ -- ------------------- ---------- ------- ---------------- --- ----- ---- -- - --------------- ------ --
在上面的代码中，我们首先通过 makeCors 生成了一个默认的 CORS 处理函数 allowedCors，然后将该函数添加到了 app.use 中，这样就为所有的请求添加了默认的 CORS 处理。接下来，我们在各个路由中添加了不同的 CORS 处理函数，针对不同的来源设置了不同的处理策略。这样，在处理 /api/foo 和 /api/bar 两个请求时，就会根据路由中的设置，使用不同的 CORS 处理函数，完成对跨域请求的限制和处理。
国际化支持
make-corsy 还提供了一些国际化支持的设置，使其支持处理来自不同语言环境的请求头信息。
----- -------- - --------------------- ----- ---- - ---------- ------- ---- -------- -------- -------- ----------------- -------------- --------------------- ----------------- ----- --------------------- ---- ------- ---- --
上述代码中，我们再次调用了 makeCors 函数工厂，并传入了一个 options 对象。其中，我们使用了以下参数：
- exposeHeaders：设置响应头中可访问的属性。
- preflightContinue：指示当预检请求返回 404（未找到）或 405（不允许）时是否继续处理请求。
- optionsSuccessStatus：预检请求成功时响应的 HTTP 状态码。
- maxAge：设置预检请求的有效期。
总结
通过本文的介绍，我们可以发现 make-corsy 是一个十分实用的 npm 包。通过使用 make-corsy，我们可以轻松地在前端开发中解决跨域请求的问题，避免重复的工作，提高开发效率。希望本文对你的学习和工作有所帮助，并且能为你的开发过程带来便捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/80903