解决 Express.js API 请求被拒绝的问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Express.js 开发 API 时，有时候会遇到请求被拒绝的问题，这可能是由于跨域请求、CORS 限制等原因造成的。本文将详细介绍这些问题的原因，并提供解决方案，帮助读者更好地理解和解决这些问题。

什么是跨域请求？

跨域请求是指在浏览器中，通过 JavaScript 发送的请求，目标地址与当前页面的地址不一致的情况。例如，当前页面的地址是 http://localhost:3000，而请求的地址是 http://api.example.com，这就是一个跨域请求。

跨域请求存在的问题是，浏览器默认不允许跨域请求，这是出于安全考虑，防止恶意网站利用跨域请求窃取用户信息。因此，如果一个 API 服务需要接受跨域请求，就必须要进行特殊的处理，否则浏览器会拒绝这些请求。

解决跨域请求的问题

在 Express.js 中，解决跨域请求的问题有多种方法，以下是其中的两种常用方法。

使用 CORS 中间件

CORS 是一种跨域资源共享的机制，通过在服务端设置响应头，告诉浏览器该服务允许跨域请求，从而解决跨域请求的问题。

在 Express.js 中，可以使用 cors 中间件来实现 CORS 功能。首先，在项目中安装 cors：

npm install cors

然后，在 Express.js 中使用 cors：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// ... 其他路由

使用 cors 中间件后，Express.js 会在响应头中添加 Access-Control-Allow-Origin 字段，告诉浏览器该服务允许跨域请求。如果需要更多的 CORS 配置，可以参考 cors 的文档。

设置响应头

除了使用 cors 中间件，还可以手动设置响应头，告诉浏览器该服务允许跨域请求。在 Express.js 中，可以通过设置响应头来实现：

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.send('Hello World!');
});

在上面的示例中，res.header('Access-Control-Allow-Origin', '*') 表示设置响应头，允许任意源的跨域请求。如果需要更多的 CORS 配置，也可以手动设置响应头来实现。

示例代码

以下是一个完整的 Express.js API 代码示例，其中包含了使用 cors 中间件和手动设置响应头两种方法来解决跨域请求的问题。

const express = require('express');
const cors = require('cors');
const app = express();

// 使用 cors 中间件
app.use(cors());

// 手动设置响应头
app.get('/api', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

总结

本文介绍了 Express.js API 请求被拒绝的问题，以及解决这些问题的方法。通过本文的学习，读者可以更好地理解跨域请求、CORS 机制等相关概念，并掌握使用 Express.js 解决跨域请求的方法。

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