跨域问题一直是前端开发中的一个难点。当我们需要在前端页面中使用 AJAX 请求其它域名下的 API 时，由于浏览器的同源策略，我们无法直接访问该 API。本文将介绍如何使用 Express.js 开发跨域 API，解决跨域问题。
什么是跨域
跨域是指在浏览器中，当前页面的域名和 AJAX 请求的域名不一致，浏览器会限制 AJAX 请求的访问。例如，我们的前端页面部署在 http://localhost:3000 下，而 API 服务部署在 http://api.example.com 下，这时我们在前端页面中使用 AJAX 请求 http://api.example.com/users 接口，就会出现跨域问题。
解决跨域问题
在 Express.js 中，我们可以使用 cors 中间件来解决跨域问题。cors 中间件会在响应头中添加 Access-Control-Allow-Origin 头，允许指定的域名访问 API。
安装 cors
在项目中安装 cors：
--- ------- ---- ------
使用 cors
在 Express.js 中使用 cors：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- -- --- -- ----------------- ----- ---- -- - -- --- --- ---------------- -- -- - ---------------- -------- ---
这样，我们就可以解决跨域问题了。但是，我们需要注意的是，使用 cors 中间件时，需要指定允许访问的域名。如果我们需要允许所有域名访问 API，可以使用通配符 *：
-------------- ------- --- ----
使用 JSONP 解决跨域问题
除了使用 cors 中间件，我们还可以使用 JSONP 来解决跨域问题。JSONP 是一种前端技术，通过动态创建 <script> 标签，来实现跨域请求数据。在服务端，我们需要对请求进行处理，返回 JSONP 格式的数据。
实现 JSONP
在 Express.js 中，我们可以使用 jsonp 方法来实现 JSONP。jsonp 方法会在响应中返回 JSONP 格式的数据，格式为 callbackName(data)。
----- ------- - -------------------
----- --- - ----------
-- --- --
----------------- ----- ---- -- -
----- ---- - -
----- -----
---- --
--
----- ------------ - -------------------
---------------------- - --- - -------------------- - -----
---
---------------- -- -- -
---------------- --------
---在前端页面中，我们可以使用以下代码来请求该 API：
-------- ---------------- - ------------------ - ----- ------ - --------------------------------- ---------- - --------------------------------------------------- ----------------------------------
这样，我们就可以通过 JSONP 来解决跨域问题了。
总结
本文介绍了如何使用 Express.js 开发跨域 API，解决跨域问题。我们可以使用 cors 中间件来设置响应头，允许指定域名访问 API；也可以使用 JSONP 来动态创建 <script> 标签，实现跨域请求数据。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6583d910d2f5e1655dea84aa