跨域请求指的是在 Web 应用程序中，从一个来源（URL）请求另一个来源（URL）的数据。在前端开发中，经常需要使用跨域请求获取一些数据，比如从其他网站 API 获取数据。然而，由于安全原因，浏览器不允许跨域请求，为此我们需要一些技术手段来解决这个问题。本文将介绍如何使用 Express.js 进行跨域请求。
什么是 Express.js？
Express.js 是一个 Node.js 的 Web 应用程序框架，它提供了一套丰富的功能和工具来构建 Web 应用程序。Express.js 能够帮助我们轻松地创建基于 Node.js 的 Web 应用程序并处理 HTTP 请求和响应。
为什么需要跨域请求？
浏览器对跨域请求的限制是出于安全考虑。如果没有这种限制，攻击者可以通过在一个网站上注入恶意代码，然后将用户重定向到他们的网站，从而窃取用户的数据。为此，现代 Web 浏览器实现了一条称为同源策略的规则。同源策略要求同一域名下的文档之间才能相互通信，否则就需要使用一些特殊的技术手段来实现跨域请求。
如何使用 Express.js 实现跨域请求？
需要注意的是，Express.js 本身并没有提供跨域请求的解决方案，但是它可以通过中间件来帮助我们解决这个问题。下面将介绍两种常见的跨域请求解决方案。
方案一：使用 cors 中间件
cors 中间件是一个用于 Express.js 的 Node.js 模块，它可以帮助我们解决跨域请求问题。cors 中间件会为响应添加一个 Access-Control-Allow-Origin 头，该头指示了服务器允许请求的来源，从而使浏览器接受来自其它源的请求。
首先，我们需要安装 cors 中间件。可以通过以下命令来安装它：
npm install cors --save
接下来，在 Express.js 应用程序中添加 cors 中间件。代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- -- ---- --- ---------------- -- -- --- -- ------------ ----- ---- -- - ---------------- --------- --- -- ----- ---------------- -- -- - ------------------- ------- -- ---- -------- ---
在上面的代码中，我们先引入了 cors 中间件，然后使用 app.use() 方法将其添加到应用程序中。当客户端发送 GET 请求时，服务器将返回 "Hello, world!" 消息，并添加 Access-Control-Allow-Origin 头，以允许来自任何源的请求。最后，我们启动了一个监听端口为 3000 的服务器。
方案二：使用 JSONP
JSONP（JSON with Padding）是一种可绕过浏览器的跨域限制的技术。JSONP 基于动态创建一个 script 标签，将 JSON 数据作为回调函数的参数传递。由于 script 标签的 src 属性没有跨域限制，因此可以在跨域情况下访问另一个域上的 JSON 数据。
以下是一个基于 Express.js 的 JSONP 示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- -- --- --
------------ ----- ---- -- -
----- ---- - - -------- ------- ------- --
----- -------- - -------------------
-- ---------- -
-- --- -------- ----- ----- -----
----- ----- - ---------------------------------------
----------------
- ---- -
-- ------- ---- -----
---------------
-
---
-- -----
---------------- -- -- -
------------------- ------- -- ---- --------
---在上面的代码中，我们处理了一个 GET 请求。如果请求中包含 callback 参数，我们将返回 JSONP 格式的数据，否则返回普通的 JSON 格式数据。在前端使用 JSONP 请求数据时，只需要指定 callback 参数即可。
总结
本文介绍了如何使用 Express.js 实现跨域请求的两种常见方法。使用 cors 中间件是最方便的跨域处理方法之一，而 JSONP 则是一种机制更为简单的跨域请求方式。需要注意的是，所有的数据都可以通过 JSONP 方式传递，但是只有 GET 请求可以使用 JSONP 方式。在实际开发中，我们需要根据具体的情况选择合适的跨域请求方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64705ae6968c7c53b0e7b992