Express.js 的 jsonp 解决方案:cors + jsonp

阅读时长 5 分钟读完

随着前端应用的发展,我们越来越需要跨域请求数据。JSONP 即是前端跨域解决方案之一,它通过动态创建 script 标签请求数据,并将数据放在回调函数中传递给前端。

但是在使用 JSONP 时,我们可能遇到以下几个问题:

  1. JSONP 只支持 GET 请求。
  2. JSONP 暴露了回调函数名,容易受到 XSS 攻击。
  3. 不支持 HTTP 请求头的自定义。

为了解决这些问题,我们可以使用 cors + jsonp 的方案。

Cors

CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它允许 Web 应用服务器进行跨域访问控制。它使用额外的 HTTP 头来告诉浏览器,让 Web 应用服务器能够让跨源的访问请求获得许可权限,避免了 AJAX 跨域请求被禁止的情况。

为了在 Express 中使用 cors,我们可以使用 cors npm 包。

上述代码会自动处理 OPTIONS 请求,并添加以下 HTTP 头:

JSONP

使用 cors 解决跨域访问请求后,我们可以使用 jsonp 发起请求。下面是一个 JSONP 请求的示例代码:

-- -------------------- ---- -------
-------- ---------- -
  ------ --- ----------------- ------- -- -
    ----- ------------ - ------------ -------------------
    ----- ------ - ---------------------------------
    ---------- - ----------------------------------
    ----------------------------------
    -------------------- - ------ -- -
      --------------
    --
    -------------- - -- -- -
      ---------- ------------ ------- ----------
    --
  ---
-
展开代码

在使用 JSONP 请求后端数据时,我们应该避免在 URL 后面添加敏感信息,如 token。推荐使用 HTTP 请求头进行认证,并使用 cors 配置允许自定义 HTTP 请求头。

示例代码

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

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

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

---------------- -- -- -
  -------------------- --- --------- -- ---------------------------
---
展开代码

客户端代码:

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

----------------------------------------------------
  ---------- -- ------------------
  ---------- -- --------------------
展开代码

请求结果:

在这个例子中,我们使用了 jsonp npm 包的解决方案,但我们也可以自己编写 jsonp 请求函数,实现更加定制化的功能。

小结

本文介绍了 Express.js 中使用 cors + jsonp 解决跨域请求的方案,同时解决了 JSONP 的一些问题,如只支持 GET 请求、暴露回调函数名的安全性问题等。通过本文,读者可以学习到在使用 JSONP 时应该注意的问题,并掌握 cors 的使用方法,从而更好地进行前端开发。

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

纠错
反馈

纠错反馈