如何在 Express.js 中使用 CORS 解决跨域问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，跨域问题是一个常见的问题。跨域问题的产生是因为浏览器的同源策略，即浏览器只允许同源的网页进行通信。当我们需要从一个域名下的网页向另一个域名下的网页发送请求时，就会产生跨域问题。在 Express.js 中，我们可以使用 CORS 解决跨域问题。

什么是 CORS

CORS（Cross-Origin Resource Sharing）是一种机制，它允许网页向其他域名的服务器请求资源。CORS 的核心思想是使用自定义的 HTTP 头部来告诉浏览器，哪些跨域请求是允许的。通过在服务器端设置相应的 HTTP 头部，可以实现跨域请求的授权。

在 Express.js 中使用 CORS

在 Express.js 中使用 CORS 很简单，我们只需要安装 cors 这个 npm 包，并在代码中使用它即可。下面是一个使用 CORS 的示例代码：

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

const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.send('Hello, world!');
});

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

在上面的代码中，我们首先在代码中引入了 express 和 cors 两个模块。然后我们创建了一个 Express 应用程序，并在应用程序中使用了 cors 中间件。在路由中，我们定义了一个 GET 请求处理程序，并在其中返回了一个字符串。最后，我们启动了应用程序，并监听在 3000 端口上。

使用了 cors 中间件后，我们的应用程序就支持跨域请求了。当我们从另一个域名下的网页向该应用程序发送请求时，浏览器会自动发送一个 OPTIONS 请求，以检查该请求是否允许跨域。如果服务器端设置了相应的 HTTP 头部，则浏览器会向该服务器端发送真正的请求，并将响应返回给网页。

CORS 的常用配置选项

CORS 提供了一些常用的配置选项，可以帮助我们更好地控制跨域请求。下面是一些常用的配置选项：

origin：允许跨域请求的源，可以是字符串或数组类型，默认为 *，表示允许所有的源访问。
methods：允许跨域请求的 HTTP 方法，可以是字符串或数组类型，默认为 GET,HEAD,PUT,PATCH,POST,DELETE。
allowedHeaders：允许跨域请求的自定义 HTTP 头部，可以是字符串或数组类型，默认为 *，表示允许所有的自定义头部。
exposedHeaders：允许客户端访问的响应头部，可以是字符串或数组类型，默认为空数组。
credentials：是否允许发送 Cookie 和 HTTP 认证信息，可以是布尔类型，默认为 false。
maxAge：预检请求的有效期，单位为秒，默认为 600。

下面是一个使用了配置选项的示例代码：

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

const app = express();

const corsOptions = {
  origin: 'http://example.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
  exposedHeaders: ['Authorization'],
  credentials: true,
  maxAge: 3600,
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.send('Hello, world!');
});

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

在上面的代码中，我们定义了一个 corsOptions 对象，并在其中设置了一些常用的配置选项。然后我们在应用程序中使用了 cors 中间件，并将 corsOptions 对象作为参数传递给该中间件。这样，我们就可以更加灵活地控制跨域请求了。

总结

在 Express.js 中使用 CORS 解决跨域问题非常简单。我们只需要安装 cors 这个 npm 包，并在代码中使用它即可。同时，CORS 还提供了一些常用的配置选项，可以帮助我们更好地控制跨域请求。通过学习本文，相信大家已经掌握了如何使用 CORS 解决跨域问题的方法，希望本文对大家有所帮助。

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