在前端开发中，我们经常需要通过 Ajax 请求获取数据。然而，由于浏览器的同源策略，不同域名下的 Ajax 请求会被浏览器拒绝。这就是跨域问题。
在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。本文将介绍如何在 Express.js 中跨域 Ajax 请求。
什么是跨域？
跨域是指在浏览器中，一个页面的脚本试图访问另一个页面的数据时，由于浏览器的同源策略，请求会被浏览器拒绝。同源策略是浏览器的一种安全策略，它限制了一个页面从另一个源加载任何资源。
同源是指协议、域名、端口号都相同。例如，http://example.com 和 https://example.com 是不同的源。
解决跨域问题
在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。
设置响应头
在 Express.js 中，我们可以通过设置响应头来解决跨域问题。在服务器端，我们可以设置 Access-Control-Allow-Origin 头，允许指定的域名访问我们的资源。
例如，我们可以设置允许所有域名访问我们的资源：
app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); next(); });
这样，所有域名都可以访问我们的资源了。
使用中间件
在 Express.js 中，我们也可以使用中间件来解决跨域问题。cors 是一个非常流行的解决跨域问题的中间件，它可以自动设置响应头，允许指定的域名访问我们的资源。
首先，我们需要安装 cors 中间件：
npm install cors然后，在服务器端，我们可以使用 cors 中间件：
const cors = require('cors'); app.use(cors());
这样，我们就可以允许指定的域名访问我们的资源了。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- --------------- ------------- ---- ----- -- - -------------------------------------------- ----- ------- --- -- ---- ---- --- -- ---------------- -- -- --------- --- --- -- -------------------- ----- ---- -- - ----- ---- - - ----- ------ ---- -- -- --------------- --- -- ----- ----- ---- - ----- ---------------- -- -- - ------------------- ------- -- --------------------------- ---展开代码
在浏览器中，我们可以通过以下方式访问服务器的 /api/data 路径：
$.ajax({ url: 'http://localhost:3000/api/data', type: 'GET', success: function(data) { console.log(data); } });
总结
在 Express.js 中，我们可以通过设置响应头和使用中间件来解决跨域问题。设置响应头需要手动设置，比较麻烦；使用中间件则更加方便，推荐使用 cors 中间件。无论采用哪种方式，都需要注意安全性，不要允许所有的域名访问我们的资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fda4bd2f5e1655dabca30
