Express.js CORS跨域配置和静态访问服务

2023-04-20 05:12| 来源: 网络整理| 查看: 265

Express.js是一个基于Node.js的轻量级的Web应用框架，它提供了一系列的中间件和API，让开发者可以快速地搭建Web服务器和处理HTTP请求。在本文中，我们将介绍如何使用Express.js配置CORS跨域访问和静态文件访问服务。

跨域配置

CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器向不同源的服务器发送请求和接收响应，从而实现跨域资源共享。CORS需要浏览器和服务器之间进行一定的协商，以确定是否允许跨域请求。如果不配置CORS，浏览器会遵循同源策略（Same-Origin Policy），即只允许向同源（相同协议、域名和端口）的服务器发送请求。

为了配置CORS，我们可以使用一个名为cors的中间件，它可以根据我们的需求设置响应头中的CORS相关字段，如Access-Control-Allow-Origin、Access-Control-Allow-Methods等。要使用cors中间件，我们首先需要安装它：

npm install cors 复制代码

然后，在我们的Express.js应用中引入并使用它：

const express = require('express'); const cors = require('cors'); const app = express(); // 使用cors中间件 app.use(cors()); // 其他路由和中间件 // ... app.listen(3000, () => { console.log('Server is running on port 3000'); }); 复制代码

这样，我们就可以实现最简单的CORS配置，即允许所有来源的跨域请求。当然，我们也可以根据需要进行更细粒度的控制，例如指定允许的来源、方法、头部等。例如，如果我们只想允许来自example.com 的跨域请求，我们可以这样写：

// 使用cors中间件，并传入一个选项对象 app.use(cors({ origin: 'http://example.com' // 指定允许的来源 })); 复制代码

更多关于cors中间件的用法和选项，请参考其文档。

当然还有不使用cors中间件的方法，即直接配置响应头信息，但是这也失去了cors中间件提供的白名单过滤等简便功能：

app.use((req: Request, res: Response, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); next(); }); 复制代码静态访问服务

除了配置CORS之外，我们还可能需要配置静态文件访问服务，即让Express.js能够提供一些静态资源（如图片、样式表、脚本等）给浏览器。这样，我们就可以将Express.js作为一个完整的Web服务器，而不需要额外的服务器来托管静态资源。

要配置静态文件访问服务，我们可以使用Express.js自带的一个中间件：express.static。这个中间件可以将一个目录作为静态资源的根目录，并根据请求路径来返回相应的文件。要使用express.static中间件，我们只需要这样写：

// 使用express.static中间件，并传入一个目录路径 app.use(express.static('public')); 复制代码

这样，我们就可以将public目录作为静态资源的根目录，并通过类似http://localhost:3000/image.jpg这样的URL来访问其中的文件。当然，我们也可以指定一个虚拟路径前缀（mount path），以区分静态资源和其他路由。例如，如果我们想让所有静态资源都以/static开头，我们可以这样写：

// 使用express.static中间件，并传入一个目录路径和一个虚拟路径前缀 app.use('/static', express.static('public')); 复制代码

这样，我们就可以通过类似http://localhost:3000/static/image.jpg 这样的URL来访问public目录下的文件。更多关于express.static中间件的用法和选项，请参考express官方文档Express - Node.js web application framework。

【本文地址】

公司简介

联系我们