npm 包 restify-cors-middleware 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在开发前端应用过程中，跨域请求是非常常见的需求。而解决跨域问题最常见的手段是通过 CORS 头部来处理。本教程将介绍如何使用 npm 包 restify-cors-middleware 来实现跨域操作。

restify-cors-middleware 简介

restify-cors-middleware 是一个用于处理 RESTful API 的中间件，用于支持 CORS 请求。相比于其他跨域解决方案，使用 restify-cors-middleware 可以让开发者更加简单地实现跨域请求的操作。

restify-cors-middleware 安装

在终端里输入以下命令，通过 npm 安装 restify-cors-middleware：

npm install restify-cors-middleware --save

restify-cors-middleware 使用

接下来我们来通过一个简单的例子，来演示 restify-cors-middleware 的使用。

假设我们在本地启动了一台服务器，并且定义了以下 API：

-- -------------------- ---- -------
----- ------- - -------------------

----- ------ - -----------------------

------------------ ----- ---- ----- -- -
  -------------------------------------------- -----
  ----------
    ---- -----
  ---
  ------ -------
---

------------------- ---------- -
  --------------- --------- -- ---- ------------ ------------
---展开代码

上述代码实现了一个 GET 请求 API，所返回的值总是 { "foo": "bar" }。但是因为没有使用 CORS，所以该 API 无法跨域访问。

接下来，我们引入 restify-cors-middleware 并使用它来处理 CORS 请求：

-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - -----------------------------------

----- ------ - -----------------------
----- ---- - ----------------
  -------- -----
---

---------------------------
------------------------

------------------ ----- ---- ----- -- -
  ----------
    ---- -----
  ---
  ------ -------
---

------------------- ---------- -
  --------------- --------- -- ---- ------------ ------------
---展开代码

在新的代码中我们添加了 restify-cors-middleware 中引入的 corsMiddleware 方法，并设置了 origins 属性，该属性指定了该服务器上主机的白名单。我们再将 corsMiddleware 放到了 server.pre 和 server.use 函数中，这样就可以确保该代码自动地确认每个请求是否需要 CORS 头部。

restify-cors-middleware 的参数和选项

现在我们来更加详细地了解一下 restify-cors-middleware 的参数和选项。

origins

该选项指定了服务器主机的白名单，只有在该白名单内的起源域名才允许进行 CORS 跨域操作。

const cors = corsMiddleware({
  origins: ['http://example.com', 'https://example.com']
});

credentials

该选项指定在生成响应中是否包括 Access-Control-Allow-Credentials 头部。该头部表示是否允许发送认证信息，并且能否在跨域请求中处理 cookie 等敏感信息。

const cors = corsMiddleware({
  credentials: true
});

headers

该选项指定了可以包含在实际请求（请求前或者 RESPONSE）或预检请求中 Access-Control-Request-Headers 首部的字段集合。

const cors = corsMiddleware({
  headers: ['X-Custom-Header']
});

exposedHeaders

该选项指定了开发者能够访问的响应头部信息。

const cors = corsMiddleware({
  exposedHeaders: ['Authorization']
});

optionsSuccessStatus

此选项指定了浏览器应发送（预检）响应的状态码。这得对应于响应中的 preflight 中设置的 Access-Control-Allow-Methods 头部的值。

const cors = corsMiddleware({
  optionsSuccessStatus: 204
});

总结

以上就是使用 restify-cors-middleware 的基础知识。该中间件是一种迅捷而简单的方式来处理跨域请求，而设置跨域请求的目的主要是增强客户端体验，所以在前端开发中是非常常见的需求。如果你的应用程序开发中遇到了跨域请求的问题，不妨尝试一下使用 restify-cors-middleware。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f26113f3b0ab45f74a8b9a2

npm 包 restify-cors-middleware 使用教程