在开发 Web 应用时，跨域问题是一个常见的挑战。在前端应用与后端服务不在同一个域名下时，浏览器会阻止跨域请求，以保证安全性。但是，有时我们需要在前端应用中调用第三方 API 或者其他域名下的服务，这时就需要解决跨域问题。
本文将介绍如何在 Express.js 中解决跨域问题，并提供最佳实践和示例代码。
跨域请求的问题
跨域请求是指前端应用通过 AJAX 或 Fetch API 等方式向另一个域名下的服务发送请求。浏览器会检查请求的源和目标是否在同一个域名下，如果不在同一个域名下，就会阻止请求。
这是一种安全机制，可以防止恶意网站通过前端应用向其他域名发送请求，获取用户的敏感信息。
但是，有时我们需要在前端应用中调用其他域名下的服务，比如调用第三方 API，这时就需要解决跨域问题。
解决跨域问题的方法
在 Express.js 中，可以通过设置响应头来解决跨域问题。下面是一些常用的设置：
1. 设置 Access-Control-Allow-Origin
Access-Control-Allow-Origin 是一个响应头，用来指定允许跨域请求的源。例如，如果前端应用的域名为 example.com，想要调用的服务的域名为 api.example.com，那么可以将 Access-Control-Allow-Origin 设置为 example.com。
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'example.com');
next();
});2. 设置 Access-Control-Allow-Methods
Access-Control-Allow-Methods 是一个响应头，用来指定允许的 HTTP 方法。例如，如果前端应用需要向服务发送 POST 请求，那么可以将 Access-Control-Allow-Methods 设置为 POST。
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Methods', 'POST');
next();
});3. 设置 Access-Control-Allow-Headers
Access-Control-Allow-Headers 是一个响应头，用来指定允许的请求头。例如，如果前端应用需要发送自定义的请求头，那么可以将 Access-Control-Allow-Headers 设置为该请求头的名称。
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
next();
});4. 设置 Access-Control-Allow-Credentials
Access-Control-Allow-Credentials 是一个响应头，用来指定是否允许发送 Cookie。如果需要发送 Cookie，可以将 Access-Control-Allow-Credentials 设置为 true。
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Credentials', true);
next();
});最佳实践
在设置响应头时，应该尽量限制允许的源、HTTP 方法、请求头和 Cookie。这可以提高安全性，防止恶意网站利用前端应用发送请求。
另外，应该将设置响应头的代码封装为一个中间件，以便在需要时重用。下面是一个示例代码：
// javascriptcn.com 代码示例
function allowCrossDomain(req, res, next) {
res.header('Access-Control-Allow-Origin', 'example.com');
res.header('Access-Control-Allow-Methods', 'POST');
res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
res.header('Access-Control-Allow-Credentials', true);
next();
}
app.use(allowCrossDomain);示例代码
下面是一个完整的示例代码，用来演示如何在 Express.js 中解决跨域问题：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
function allowCrossDomain(req, res, next) {
res.header('Access-Control-Allow-Origin', 'example.com');
res.header('Access-Control-Allow-Methods', 'POST');
res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
res.header('Access-Control-Allow-Credentials', true);
next();
}
app.use(allowCrossDomain);
app.post('/api', function(req, res) {
res.send('Hello World!');
});
app.listen(3000, function() {
console.log('Listening on port 3000');
});在该示例代码中，设置了一个中间件 allowCrossDomain，用来设置响应头。然后，定义了一个路由 /api，用来处理 POST 请求。在请求处理函数中，发送了一个字符串 Hello World!。
总结
本文介绍了如何在 Express.js 中解决跨域问题，并提供了最佳实践和示例代码。在实际开发中，应该根据具体情况设置允许的源、HTTP 方法、请求头和 Cookie，以保证安全性。同时，应该将设置响应头的代码封装为一个中间件，以便在需要时重用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6551755cd2f5e1655db34ea4