什么是 CORS 错误？
CORS（跨源资源共享）是一种浏览器安全策略，用于限制 web 应用程序在一个域名下的 JavaScript 脚本如何与其他域名下的资源进行交互。如果你的 Express.js 应用程序试图与另一个域名下的资源进行交互，而该资源不允许来自你的应用程序的请求，浏览器将会阻止这些请求并抛出 CORS 错误。
CORS 错误通常会在控制台中显示以下消息：
Access to XMLHttpRequest at 'http://example.com/api/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
如何解决 CORS 错误？
要解决 CORS 错误，你需要在 Express.js 应用程序中启用 CORS。Express.js 提供了 cors 中间件来处理跨域请求。以下是如何使用 cors 中间件的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- -- ---- --- ---------------- -- -- --- -- --------------- ----- ---- -- - ---------------- --------- --- ---------------- -- -- ------------------- ------- -- -------------------------
在上面的示例中，我们首先导入 cors 中间件并将其传递给 app.use() 方法。这将启用 CORS 中间件并允许跨域请求。然后，我们定义一个简单的路由来处理 GET 请求，并在响应中发送一条消息。
现在，你可以从另一个域名下的 JavaScript 脚本发出 GET 请求，如下所示：
fetch('http://localhost:3000/api')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log(error));在上面的示例中，我们使用 JavaScript 的 fetch API 发出 GET 请求并在控制台中打印响应数据。由于我们已经启用了 CORS 中间件，因此浏览器将不会阻止这个请求并返回 CORS 错误。
总结
CORS 错误是一种常见的浏览器安全策略，用于限制 web 应用程序在一个域名下的 JavaScript 脚本如何与其他域名下的资源进行交互。在 Express.js 应用程序中启用 CORS 中间件可以解决这些错误。在本文中，我们学习了如何使用 Express.js 的 cors 中间件来处理跨域请求，并提供了示例代码来演示如何在 Express.js 应用程序中解决 CORS 错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb87eaadd4f0e0ff52f3c6