如何在MERN架构（React前端+Express后端）中提供静态HTML文件并传递Urn参数

核心问题在于你没有配置Express的静态文件服务中间件，导致Express无法识别并返回viewer.html文件，从而出现404错误。下面是分步解决方案：

1. 配置静态文件服务 #

在你的app.js中，添加express.static中间件，指定静态文件所在的目录。因为app.js和viewer.html的父目录都是server文件夹，所以直接用__dirname（当前脚本所在的目录，也就是server目录）作为静态目录即可：

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

// 关键：配置静态文件服务，让Express提供server目录下的静态资源
app.use(express.static(__dirname));

// 其余中间件（如解析请求体）和路由放在后面
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// ... 你的POST和GET路由代码

这个中间件会告诉Express：当收到静态资源请求（比如/viewer.html）时，去server目录下查找对应的文件并返回。

2. 修改重定向路径 #

之前的重定向硬编码了完整URL，建议改成相对路径，这样更灵活（比如后续修改端口时不用改代码）：

在你的GET路由的成功回调里，把：

res.redirect('http://localhost:8080/viewer.html?urn=' + urn);

改成：

res.redirect('/viewer.html?urn=' + urn);

3. 额外优化与注意事项 #

• 修正拼写错误：你的POST路由错误处理里有个笔误res.send(error.messa);，应该改成res.send(error.message);，避免报错时返回undefined。
• 跨域问题：如果你的React前端运行在不同端口（比如默认的3000），前端调用后端API会被浏览器的跨域策略拦截。解决办法是安装cors包并配置中间件：

  npm install cors
  

  然后在app.js里添加：

  const cors = require('cors');
  app.use(cors());
  

• 静态资源依赖：如果viewer.html依赖其他文件（比如JS、CSS、图片），确保这些文件也在server目录下，或者根据实际位置配置多个静态目录（比如app.use(express.static(__dirname + '/public'))如果资源在server/public下）。

验证效果 #

启动后端服务器后，直接访问http://localhost:8080/viewer.html，如果能正常打开页面，说明静态配置生效。之后再通过前端按钮触发API流程，就能成功重定向到带URN参数的viewer.html了。

内容的提问来源于stack exchange，提问作者Shehryar Tanoli