在前端开发中，Express.js 是使用最广泛的 Node.js 框架之一，它提供了很多方便的功能，包括路由、中间件等。然而，有时我们在使用 Express.js 的 POST 方法时，可能会遇到请求失败的问题。本文将介绍如何解决这个问题，让你的 Express.js 应用更加完善。
问题描述
假设我们要向后端发送一个 POST 请求，请求的数据是一个 JSON 对象。我们可以使用 JavaScript 的 fetch API 来发送请求，代码如下所示:
-- -------------------- ---- -------
---------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- -------
---- --
--
---------------- -- -
-----------------------------
------------ -- -
-------------------
---在后端，我们使用 Express.js 来接收这个请求并处理。代码如下所示:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------------------ ------------------------- ----- ---- -- - ----- - ----- --- - - --------- ----------------- ----- -------------------- --- ---------------- -- -- - ------------------- -- ------- -- ---- -------- ---
当我们运行这个应用并访问前端页面时，可以看到出现了请求失败的错误信息。我们可以在控制台中看到如下的错误: TypeError: Failed to fetch
问题分析
为什么会出现请求失败的错误呢？经过调试发现，这个错误是由于 CORS 导致的。CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，它允许 Web 应用请求其他域名下的资源。CORS 通过设置 HTTP 头来告诉浏览器哪些域名可以访问它所请求的资源。当浏览器发现请求的地址与当前站点的地址不一样时，会使用 CORS 来检查是否允许跨域请求。如果不允许，则会禁止发送请求。
在上面的示例代码中，我们通过 fetch API 发起了一个跨域请求，但是在后端没有设置允许跨域请求的头信息，所以浏览器禁止了这个请求，从而导致 JavaScript 抛出了 TypeError，请求失败。
解决方法
要解决这个问题，我们需要在后端添加允许跨域请求的头信息，让浏览器允许发送跨域请求。Express.js 提供了一个中间件 cors，用来处理跨域问题。我们只需要在应用中引入这个中间件，就可以解决请求失败的问题。代码如下所示:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- ------------------------ ------------------------- ----- ---- -- - ----- - ----- --- - - --------- ----------------- ----- -------------------- --- ---------------- -- -- - ------------------- -- ------- -- ---- -------- ---
现在重新运行应用，再次访问前端页面，就可以成功发送请求并接收到响应了。
总结
在本文中，我们介绍了 Express.js 的 POST 方法的请求失败问题，分析了造成这个问题的原因，并给出了解决方法。要解决这个问题，只需要在后端添加一个 cors 中间件即可。在实际开发中，如果遇到类似的问题，可以根据本文提供的方法来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b56fe968c7c53b0daf148