Express.js 中如何加入 CORS 支持，跨域处理

背景介绍

在 Web 应用程序中，跨域资源共享（CORS）是一种机制，它允许 Web 应用程序从不同的域访问其资源。这在前端开发中非常常见，例如在开发 Web 应用程序时，您可能需要从一个域获取数据，而将其显示在另一个域上。但是，由于浏览器的同源策略限制，这种跨域请求是不被允许的。

在这种情况下，我们需要使用 CORS（跨域资源共享）机制来允许跨域请求。本文将介绍如何在 Express.js 中添加 CORS 支持，以及如何处理跨域请求。

如何加入 CORS 支持

在 Express.js 中，我们可以使用 cors 中间件来添加 CORS 支持。cors 中间件是一个 Node.js 包，它可以自动处理 CORS 请求，并使其在 Express 应用程序中非常容易使用。

以下是如何在 Express.js 中使用 cors 中间件：

// javascriptcn.com 代码示例
const express = require('express');
const cors = require('cors');

const app = express();

// 添加 CORS 支持
app.use(cors());

// 处理跨域请求
app.get('/api/data', (req, res) => {
  // 处理跨域请求
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

如上所示，我们只需要在应用程序中使用 app.use(cors()) 就可以自动添加 CORS 支持，这样我们就可以处理来自其他域的请求了。

如何处理跨域请求

在 Express.js 中，我们可以使用 res.header() 方法来设置响应头，从而处理跨域请求。以下是如何在 Express.js 中处理跨域请求的示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const cors = require('cors');

const app = express();

// 添加 CORS 支持
app.use(cors());

// 处理跨域请求
app.get('/api/data', (req, res) => {
  // 设置响应头
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  
  // 处理请求
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

如上所示，我们使用 res.header() 方法设置了 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 响应头，这样我们就可以处理跨域请求了。

总结

在本文中，我们介绍了如何在 Express.js 中添加 CORS 支持，并处理跨域请求。我们使用 cors 中间件来添加 CORS 支持，并使用 res.header() 方法来设置响应头，从而处理跨域请求。希望本文对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a61e4d2f5e1655d4add59