Express.js 的 CORS 解决方案

阅读时长 6 分钟读完

CORS(跨源资源共享)是浏览器的一种安全策略,用于限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。在前端开发中,经常会遇到跨域的问题,这时候我们就需要使用 CORS 来解决。

在 Express.js 中,我们可以使用一些中间件来实现 CORS,下面将详细介绍如何使用这些中间件。

安装依赖

使用 Express.js 实现 CORS,我们需要安装两个插件:cors 和 body-parser。通过 npm 安装:

启用 CORS

启用 CORS 非常简单,只需要在 Express.js 中使用 cors() 中间件即可。例如:

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

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

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

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

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

上面的示例中,我们使用了 cors() 中间件来启用 CORS,这样我们的服务端就可以接收来自任何来源的请求了。

但是,启用 CORS 可能会带来一些安全问题。例如,如果我们允许任何来源都可以访问我们的 API,那么就有可能被其他网站利用来进行 CSRF 攻击。

因此,为了更好的安全性,我们需要使用一些配置来限制 CORS 允许访问的来源。

配置 CORS

配置 CORS 可以通过调用 cors() 中间件并传递一些选项来实现,例如:

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

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

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

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

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

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

上面的示例中,我们在 cors() 中间件中传递了一个名为 corsOptions 的配置项对象,可以设置以下选项:

  • origin:设置允许访问的源。可以是字符串、正则表达式或函数。例如:'http://localhost:8080'、/\*.example.com/、(origin) => origin.startsWith('http://localhost')
  • methods:设置允许访问的 HTTP 方法。例如:['GET', 'PUT', 'POST']
  • allowedHeaders:设置允许访问的请求头。例如:['Content-Type', 'Authorization']
  • exposedHeaders:设置允许暴露的响应头。例如:['Content-Length']
  • credentials:设置是否允许发送验证信息(cookie、HTTP 认证信息等)。例如:true
  • maxAge:设置 preflight 请求的缓存时间(以秒为单位)。例如:600

示例代码

下面是一个完整的示例代码:

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

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

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

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

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

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

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

上面的示例代码中,我们使用了 cors() 中间件和 bodyParser.json() 中间件,启用了 CORS 并解析了请求体。同时,我们还定义了一个 /login 路由,用于处理登录请求。如果用户名密码正确,返回 'Login success!',否则返回 'Invalid username or password!'。

总结

本文介绍了如何在 Express.js 中使用 cors 插件来实现 CORS,包括使用中间件来启用和配置 CORS,并提供了完整的示例代码。了解和掌握如何使用 CORS 是前端开发中必不可少的一部分,也是提升网站安全性的重要措施。

参考链接:

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6491f3fc48841e9894fe4eeb

纠错
反馈