允许前端与ExpressJS后端之间的相对路径

Allowing relative pathing for front-end with ExpressJS back-end

本文关键字：之间 后端 相对 路径 ExpressJS 许前端 前端      更新时间：2023-09-26

我正忙着用Express 4.14构建一个应用程序。关于路由，当请求作为"https://example.com/page"进入时，例如，我使用res.sendFile(__dirname + "/../client/pages/page/index.html");。

前端开发人员在页面中使用相对链接来包含他的ReactJS脚本-例如，他会使用像<script src="js/index.js"></script>这样的标签。问题是，当然，js/index.js的请求是去NodeJS服务器并返回404，因为没有文件/js/index.js从项目的根，而不是在client/pages/home/js/index.js。是否有某种方法允许从页文件夹进行相对路径?

我正在玩express.static中间件，但问题是有多个页面，每个页面都有自己的旧文件夹-它们被分离到自己的小SPA中，所以在当前的设置下，创建单个/public静态目录并不可行。

文件目录设置:

project
|- server.js
|   |- node_modules
|   |- config
|   |- controllers
|   |- models
|   |- client
|      |- pages (Splitting the pages into React SPA)
|         |- pageFolder (React SPA, one per module we need.)
|            |- page.html
|            |- other files here..

路由到客户端的控制器是controllers/clientCtrl.js，它在client/pages/pageFolder中服务index.html。

在index.html中，当试图在pageFolder中包含index.js时，响应是Cannot GET /index.html，因为它正在向NodeJS服务器发送请求，而不是在当前目录中查找。

正如其他人建议的那样，有很好的理由使用let react或express来处理所有的路由。如果您当前的作业不允许这样做，那么您可能确实需要使用express。静态与一个完整的目录。

有了index.html和webpack bundle，你就可以把其他页面分成子目录，并确保相对路径指向静态html和js文件。

例如，如果index.html位于

public - index.html - bundle.js - pagefolder - - page.html - - page.js

只要您提供整个公共目录，从index.html到./pagefolder/page.html的链接将是有效的，等等

相关文章：