随着前端应用的发展，我们越来越需要跨域请求数据。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
