如果你正在使用 Express.js 创建 Web 应用程序，你可能会遇到跨域请求问题。简单来说，跨域请求是指从一个源（协议、主机和端口）请求资源时，使用了不同的源。这可能会导致浏览器禁止跨域请求，因为它可以防止一些安全问题。
在本文中，我们将学习如何通过配置 Express.js API 以允许跨域请求，并提供一些示例代码来帮助你理解如何实现。
跨域请求问题
跨域请求问题的具体体现是在浏览器的控制台中出现如下的错误信息：
------ -- -------------- -- ------------------------ ---- ------ ----------------------- --- ---- ------- -- ---- ------- -- ----------------------------- ------ -- ------- -- --- --------- ---------
这意味着你的应用程序正在从一个源请求资源，但服务器没有允许该源请求资源。
解决跨域请求问题
为了允许跨域请求，我们需要在 Express.js API 中配置 CORS。CORS（Cross-origin resource sharing）是为了解决跨域请求而设立的 Web 应用程序的一种机制。
我们可以通过安装 cors npm 包来便捷地配置 Express.js 中的 CORS。例如，在你的应用程序中执行以下命令来安装 cors：
--- ------- ----
配置 CORS 是非常简单的，只需要在 Express.js 中应用如下代码即可：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----------------
cors() 会为你添加以下 HTTP 头：
---------------------------- - ----------------------------- ---- ----- ---- ------ ----------------------------- ------------
这允许所有来源的 HTTP GET、POST、PUT 和 DELETE 请求，并允许你使用 Content-Type 头。
你也可以指定允许的来源/主机。例如，如果你只想允许 localhost 来自访问：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -------------- ------- ----------------------- ----
你还可以指定特定的 HTTP 方法：
-------------- -------- ------- ------- ----
示例代码
下面是一个完整的例子，我们可以使用它来测试我们的跨域请求是否正常：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- --------------- ----- ---- -- - ---------- ----- ------ ------- --- --- ----- ---- - ----- ---------------- -- -- - ------------------- --------- -- ---- ---------- ---
在你的本地机器上运行此代码，然后打开浏览器访问 http://localhost:3000/api。如果一切正常，你应该可以看到浏览器中显示的以下信息：
------ ------ --------
结论
现在你已经知道如何在你的 Express.js API 中配置 CORS，使你的应用程序能够处理跨域请求了。当然，这是非常基础的 CORS 配置。在实际开发中，你可能会遇到更复杂的情况。但了解了这些基础后，你已经可以开始深入学习更高级的 CORS 配置内容了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f21992e7021665efbcad8