随着前端应用的发展,我们越来越需要跨域请求数据。JSONP 即是前端跨域解决方案之一,它通过动态创建 script 标签请求数据,并将数据放在回调函数中传递给前端。
但是在使用 JSONP 时,我们可能遇到以下几个问题:
- JSONP 只支持 GET 请求。
- JSONP 暴露了回调函数名,容易受到 XSS 攻击。
- 不支持 HTTP 请求头的自定义。
为了解决这些问题,我们可以使用 cors + jsonp 的方案。
Cors
CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它允许 Web 应用服务器进行跨域访问控制。它使用额外的 HTTP 头来告诉浏览器,让 Web 应用服务器能够让跨源的访问请求获得许可权限,避免了 AJAX 跨域请求被禁止的情况。
为了在 Express 中使用 cors,我们可以使用 cors npm 包。
const cors = require('cors'); app.use(cors());
上述代码会自动处理 OPTIONS 请求,并添加以下 HTTP 头:
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Headers: Content-Type,Authorization
JSONP
使用 cors 解决跨域访问请求后,我们可以使用 jsonp 发起请求。下面是一个 JSONP 请求的示例代码:
-- -------------------- ---- ------- -------- ---------- - ------ --- ----------------- ------- -- - ----- ------------ - ------------ ------------------- ----- ------ - --------------------------------- ---------- - ---------------------------------- ---------------------------------- -------------------- - ------ -- - -------------- -- -------------- - -- -- - ---------- ------------ ------- ---------- -- --- -
在使用 JSONP 请求后端数据时,我们应该避免在 URL 后面添加敏感信息,如 token。推荐使用 HTTP 请求头进行认证,并使用 cors 配置允许自定义 HTTP 请求头。
示例代码
下面是一个完整的示例代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- ----- ---- - ----- ----- ---- - - ------- -- -- -------------------- ----- ---- -- - ----- ------------ - ------------------- ---------------------- - ------------------------------------------ - ------ --- ---------------- -- -- - -------------------- --- --------- -- --------------------------- ---
客户端代码:
-- -------------------- ---- ------- -------- ---------- - ------ --- ----------------- ------- -- - ----- ------------ - ------------ ------------------- ----- ------ - --------------------------------- ---------- - ---------------------------------- ---------------------------------- -------------------- - ------ -- - -------------- -- -------------- - -- -- - ---------- ------------ ------- ---------- -- --- - ---------------------------------------------------- ---------- -- ------------------ ---------- -- --------------------
请求结果:
foo({"answer": 42})
在这个例子中,我们使用了 jsonp npm 包的解决方案,但我们也可以自己编写 jsonp 请求函数,实现更加定制化的功能。
小结
本文介绍了 Express.js 中使用 cors + jsonp 解决跨域请求的方案,同时解决了 JSONP 的一些问题,如只支持 GET 请求、暴露回调函数名的安全性问题等。通过本文,读者可以学习到在使用 JSONP 时应该注意的问题,并掌握 cors 的使用方法,从而更好地进行前端开发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6791e584504e4ea9bd5b6e9c